因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.
相信建站的同学多少会考虑图片展示的问题, 当用户点击图片时究竟用什么形式向用户展示图片呢? 或许是放大镜, 或许是新开页面, 然而有很多人选择了在本页 popup 展示, 看似 Mac 的 Lightbox 效果, 实用而且洋气.
无论是自己的网站还是公司网站, 都用不到这样的效果, 写这么个文章有点奇怪. 只因最近给一个朋友做了几个页面, 他要求有类似效果. 而且我之前做过一个叫 Highslide4WP 的 WordPress 插件, 所以我也就对比了一下, 希望对其他站长有所帮助.
WordPress 升级到 3.1 之后, 如果主题支持 wp_head() 方法, 将在页面加载一个名为 l10n.js 的文件, 这是为 JavaScript 本地化提供的工具库. 目前对大多数人来说是一个无用的功能, 甚至有人认为这是 WordPress 卑鄙地偷偷地在页面上埋了一个扯淡的脚本, 所以网上能找到的都是如何卸载脚本的方法. 在我们卸载之前, 是不是应该先了解一下这是怎样的一个功能, 添加脚本的意图是什么? 本文将说明 l10n.js 脚本存在的意义, 本地化脚本的使用方法和对其未来的展望.
<script type='text/javascript' src='{ROOT DIR}/wp-includes/js/l10n.js?ver=20101110'></script>这是一个译文, 文中谈及的 JSON 编辑工具和原文已经是 2007 年的产物. 浏览器兼容也是很老的版本, 但工具在新型浏览器中使用正常. 今日看到一个网友的博客提到这个 JSON 编辑器, 试用了一下感觉不错, 起码可以满足我的需求, 所以顺便翻译一下分享出来. 译文如下:
帮朋友招 ASP.NET MVC 软件开发. 公司业务类型属于欧美软件外包, 其招聘要求如下:
个人品格: 诚信
专业技能: 精通 ASP.NET MVC, 精通 C# 3.0 或 4.0, 精通 JavaScript/AJAX/jQuery
语言能力: 能看懂英文技术 Email, 理解英文任务. 最好也具备听说写的英文能力.
办公地点: 北京
博客流行在侧边栏放置 4 到 6 个 125x125 的广告, 但一般的摆放顺序存在问题. 如果广告位置被固定, 各个位置的天然关注度肯定是不一样的.
投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.
代码如何实现? 在这我推荐两种随机显示广告的处理办法.
我很喜欢在 google.cn/music 上找 mp3, 因为谷歌音乐在版权方面, 用户体验和搜索功能都做得很好. 但是它的搜索栏提示功能一直存在一个小问题, bug 存在半年以上了吧...
在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:
JavaScript 是弱类型语言, 为了保证数值的有效性, 在处理数值的时候, 我们可以对数值字符串进行强行转换. 如 parseInt 取整和 parseFloat 取浮点数.
Java 也有 Integer.parseInt() 方法, 但是 JavaScript 的 parseInt 处理方式与 Java 等强整型语言不太一样, 所以经常有人因为对这个方法的使用不当而获得异常返回.
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.
用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:
对JavaScript 放大镜来说, 计算倍率必不可少.
一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系.
倍率 = 原图/缩略图 = 视窗/镜片
倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1.
因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率.
用 JS 计算鼠标在页面上的位置并非难事, 只要把握好各浏览器的区别就可以轻易算出鼠标位置. (这是 DEMO)
视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以通过视窗看到页面的各个位置.
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置
右图中的 cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)
IE 以外的浏览器 (本人测试过 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离. 但 IE (本人测试过 IE6, IE7, IE8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.
本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
已经写了好几个关于网页导航菜单的教程了, 我都是用原生 JavaScript 敲的代码, 一方面是为了读者更好地去理解其中的原理, 另一方面是让程序可以在不加载任何 framework 的情况下正常运行. 但是时间长了, 我发现越来越多人问我如何将这些效果集成到一些 JS 框架上, 尤其是 jQuery. 所以, 本节我们不探讨更多的效果, 而是将之前的一些菜单效果用 jQuery 来实现出来.
这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.
jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown 和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.
如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...
不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.
干前端这行当已经超过一个月了, 每天都会遇到新奇古怪, 甚至离奇的问题. 虽然绝大部分都是一些小问题, 但我觉得还是有必要记录下来.
今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行)