因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.
上节已经介绍了如何取得画布及其上下文对象, 我们将开始使用 HTML5 Canvas 的绘图 API 来进行图形绘制, 本文会提及线条, 矩形, 圆形和文本这几个基本图形. 本节主要介绍相关的图形绘制方法, 不会有难以理解的内容, 在需要注意的地方会着墨较多.
最近在看一本关于 HTML5 Canvas 的书, 叫《Foundation HTML5 Canvas: For Games and Entertainment》, 书名比较长, 作者说得也比较累赘, 但是章节和内容都很清晰. 后面我会写一系列文章, 关于 HTML5 画布, 与此书章节同步, 可能插放一些别的内容.
博客流行在侧边栏放置 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.
因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率.
JavaScript 放大镜是我成为前端后写的第一个组件, 从中学到了很多东西. 现在已经过去超过半年, 我希望能在自己仍有印象的时候, 整理和重新思考其中的一些处理方法, 将它改进, 并将这些想法写出来.
放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果.
本次我们先了解如何在缩略图上移动镜片. (这是 DEMO)
用 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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown 和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.
如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...
不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.
干前端这行当已经超过一个月了, 每天都会遇到新奇古怪, 甚至离奇的问题. 虽然绝大部分都是一些小问题, 但我觉得还是有必要记录下来.
今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行)
JavaScript 是很好的发明, 它让网页动了起来. 大家都喜欢这样的那样的页面效果, 所以 JS 的使用日益广泛, 甚至被依赖. 但你务必提醒自己, 绝大多数的浏览器都支持 JavaScript, 但不是全部.
上一篇文章中我简单地讲解了如何使用 JavaScript 实现滑动置顶效果. 那段调用 JS 代码的 HTML 片段曾经被我修改过两次. 这次我们将会以它为例, 讲解为什么不能完全依赖 JavaScript 并如何进行处理.
一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美). 随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.
首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...