
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实现广告聚焦框效果的代码,想着拿过来玩一下。
人吐槽 | 人点赞 |
发表评论