正在载入...

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>


这段代码放在哪里?放在<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实现广告聚焦框效果的代码,想着拿过来玩一下。

本文链接:

关键词:jQuery, 互联网, 代码, 广告聚焦框,

(全文完        )

Comments

6 条评论(网友评论:4 条,博主回复:2 条)快速评论

  1. 不错,呵呵。

  2. 西门

    效果还不错哟

  3. 效果还不错哟

  4. 效果还不错哟

你需要 登录 才可以回复.