jQuery实现的这个“广告聚焦框”效果，有点像ppt的缩放效果，就是一个红色大框缩小为广告大小的小框，并消失。
目前，wentong.org已经添加广告聚焦框效果，如果哪天取消也就是没有预览的了。
这段代码jQuery实现广告聚焦框效果兼容IE6-8，FF和Chrome
html代码
<div class=”box” id=”focus_box”>你的广告代码</div>
这段代码放哪里？你想把广告放在那里，就把这段代码放在那里。
javascript代码
| <script> | |
| $(function(){ | |
| var border_width = 3, | |
| win_width = $(window).width(), | |
| win_height = $(window).height(), | |
| box_div = $(“#focus_box”), | |
| box_left = box_div.offset().left, | |
| box_top = box_div.offset().top, | |
| box_width = box_div.width(), | |
| box_height = box_div.height(), | |
| focus_box = $(“<span class=’focus_line’></span>”); | |
| setTimeout(function(){ | |
| var scroll_top = $(window).scrollTop(); | |
| focus_box.css({ | |
| top:scroll_top, | |
| width:(win_width-border_width*2)+”px”, | |
| height:(win_height-border_width*2)+”px” | |
| }).appendTo(“body”).animate({ | |
| left:(box_left-border_width)+”px”, | |
| top:(box_top-border_width)+”px”, | |
| width:box_width+”px”, | |
| height:box_height+”px” | |
| },600).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200,function(){ | |
| $(this).remove(); | |
| }); | |
| },80); | |
| }); | |
| </script> |
[ad]
这段代码放在哪里？放在<script src=”xxx.com/jquery.min.js”></script>下面。
如果的主题没有/jquery.min.js这个文件，那么在</head>的上面复制粘贴这个段代码<script src=”http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js”></script>。并把上面的代码复制粘贴在这行代码下面。
css代码
.box{height:200px;margin-bottom:10px;background-color:#eee;}
.focus_line{position:absolute;left:0;z-index:99999;border:3px solid #f00;}
把这段代码复制你的css代码中。
好了，jQuery实现广告聚焦框效果基本实现了。
这段代码并不是我的原创，那是今天在逛“西门的后花园”（好邪恶的词），看到这段jQuery实现广告聚焦框效果的代码，想着拿过来玩一下。
| 人吐槽 | 人点赞 |
发表评论