西门的后花园

一个热爱网络的年轻人的博客

jQuery仿8684广告聚焦框

前几天网上查武汉地铁站点的时候,发现8684武汉地铁页面的一个广告聚焦框挺有意思的,所以打算仿一下。

给各位的一个建议,仿特效的时候,不要去看源代码,先按照自己的思路做一次,不管好坏,做完了或者实在做不出来,再来看源代码。前端工作有个好处,就是基本上所有特效都是开源的。

然后是我做的DEMO,兼容IE6-8,FF和Chrome。

这里有一点需要强调下。为什么我要用setTimeout,是因为一开始做的时候正常,但如果在IE下,网页拉到下面,刷新网页,一般情况下网页还是会在下面。这个时候,生成的窗口大小聚焦框位置就会不对。所以要获取到滚动条的高度scrollTop值,生成的聚焦框高度需要加上滚动条的高度,才是对的。

但又会出现一个问题,IE下,不管是jQuery方法还是javascript方法,一刷新网页,获取到的scrollTop值都是0,不管网页是不是在下面。感谢群友DINO告诉我的方法,用setTimeout延迟一下再获取,就可以获取到此时正确的scrollTop值了。

如果大家不在乎这个,可以删掉setTimeout和scrollTop,或许会增加点效率吧,哈哈。

另外我也看了8684的方法,是用的一个名叫jquery.seek的插件,这个插件还提交到jQuery官网了。不过貌似作者和jQuery官网都把这个插件给删除了。毕竟他是做的插件,所以代码量还是比较大的。如果只需要我这一个特效,手写的话代码量少了许多。

评论已关闭

分类目录