西门的后花园

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

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官网都把这个插件给删除了。毕竟他是做的插件，所以代码量还是比较大的。如果只需要我这一个特效，手写的话代码量少了许多。

评论列表

luacloud

回复

2013/01/04 at 08:47

不知道这样的效果会不会被百度惩罚啊。
- 西门
  
  回复
  
  2013/01/04 at 22:04
  
  特效和SEO没冲突。
- 集趣
  
  回复
  
  2013/02/20 at 23:50
  
  这个问题很幽默
汶海洳

回复

2013/01/04 at 09:26

🙄 留着看看以后会不会用到，暂时木有需求了……
常阳时光

回复

2013/01/04 at 12:53

不懂技术的飘过~
Cyan

回复

2013/01/04 at 23:25

我多么想做一个不会代码的前端啊~
朵未

回复

2013/01/05 at 00:12

这个特效吸引人的目光啊。
于泽鹏

回复

2013/01/05 at 08:55

不错
kitten0

回复

2013/01/05 at 10:44

完全看不明白
观尔腾

回复

2013/01/05 at 12:03

喜欢这个特效，啦啦
我的名字叫麒

回复

2013/01/05 at 13:22

新年快乐~祝博主在新年，博客更上一层楼！
所谓刚子

回复

2013/01/05 at 23:47

这个特效不错哦哈哈哈有时间实现一下！哈哈哈
海涛

回复

2013/01/06 at 04:19

来看啦
博主好漂亮的模板啊
期待回访中你好
Kiyo

回复

2013/01/06 at 13:10

很不错，有空收藏起来，嘿嘿！
Musk

回复

2013/01/06 at 19:12

就喜欢这类js程序
Jr

回复

2013/01/06 at 23:44

聚焦框效果还不错，雪藏起，不知道什么时候用得到 😎
Win8迷

回复

2013/01/06 at 23:50

😕 不支持IE9和10 ？
zwwooooo

回复

2013/01/07 at 15:24

不错，如果做广告之类的很有用
Gavin

回复

2013/01/07 at 23:17

效果还是不错的，不过对广告无爱
QQ地带

回复

2013/01/09 at 16:58

找了很久了~~~哈哈~~~~~~~~~无意逛进来看到的。
大发

回复

2013/01/10 at 13:43

要不要给我的主机格调加上，哈哈。
爱软E

回复

2013/01/10 at 14:55

无意间挤奶了这个网站 😉
大发

回复

2013/01/11 at 10:55

这次发布的主题不小心把你的广告带上了，哈哈
sprityaoyao

回复

2013/01/11 at 21:28

建议不错，不过很多初学者还是喜欢看代码
小年

回复

2013/01/12 at 15:13

很抢镜哦 😮
夜枫

回复

2013/01/12 at 18:00

好一个Demo~~~右键[查看元素(N)]
Junan

回复

2013/01/13 at 12:17

又一技术活了 😈
爱软E

回复

2013/01/13 at 12:18

博主玩前段的
Miracle

回复

2013/01/13 at 13:33

这个真不错~下次整合到博客里 😆 😆
所谓刚子

回复

2013/01/15 at 17:07

莫非更新都是这么的不着急嘛哈哈来了好几次都是没更新！
牛逼思维

回复

2013/01/16 at 11:30

GG广告外围能用么。。嘿嘿
阿越

回复

2013/01/16 at 20:00

😀 太棒了，赞一个
牧风

回复

2013/01/18 at 09:02

IE8以上可以用 after 或者before的感觉
Robin

回复

2013/01/19 at 13:57

啊哈，这个有点意思，不过之前还真没看到有这个效果的页面呢。学习了
peascloud

回复

2013/01/21 at 13:25

无限给力。。
我的名字叫麒

回复

2013/01/24 at 13:29

那个demo怎么看着那么奇怪？？？
Robin

回复

2013/01/24 at 14:29

😛 这个效果很酷啊西门兄！
wmtimes

回复

2013/01/25 at 11:50

这小动画不错嘛。
Tokin

回复

2013/01/30 at 20:36

有空深入折腾下也不错
jghg

回复

2013/01/31 at 12:03

对于代码一窍不通
ons

回复

2013/02/02 at 16:12

什么情况这个是
- 常阳时光
  
  回复
  
  2013/02/06 at 17:10
  
  这个也是西门？
白小黑

回复

2013/02/03 at 11:22

亲爱的，我来凑热闹。
- 常阳时光
  
  回复
  
  2013/02/06 at 17:09
  
  🙂 我也来~
huangjun

回复

2013/02/03 at 11:32

看来我真的不喜欢搞技术，如果我看到这个，压根不会想到代码方面。
卫衣套装

回复

2013/02/05 at 17:43

来过。。。。。。。。。
bbis

回复

2013/02/10 at 10:58

比较醒目哦，
第三人称

回复

2013/02/12 at 16:45

挺好看，不过暂时不挂ad
罗迦费升格

回复

2013/02/14 at 23:42

😉 这个简直是为广告独身打造的！！！ 😆
WJJ

回复

2013/02/15 at 18:42

其实我想知道，你这个返回顶部特效是怎么做的。
eason

回复

2013/04/18 at 22:17

这个特效做的不错，不过在懒人图库，也有很多这样的特效，都可以借鉴，不过还是谢谢你的分享。 😎
宁波财务公司

回复

2013/06/17 at 09:19

这是广告效应
宁波财务公司

回复

2013/06/17 at 09:19

恩恩，学到了

向宁波财务公司进行回复取消回复