jQuery右下角弹出广告代码兼容多浏览器

发布时间:2019-11-09编辑:脚本学堂
分享一个jquery右下角弹出广告代码的例子,jquery弹窗代码,兼容多个浏览器哦,需要的朋友参考下。

jquery写了个右下角弹出广告,经过测试完美支持各个浏览器。
右下角提示框)需要JQ库,可以去jQurey官网去下载,下载后调入js文件,然后加上以下js:
 

复制代码 代码示例:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var menutop = $(window).height() - $("#test2").height();
var menuright = $(window).width() - $("#test2").width();
$(window).scroll(function (){
var offsetTop = menutop + $(window).scrollTop();
$("#test2").css("top",offsetTop );
$("#test2").css("left",menuright);
});
$("#gbb").click(function(){
$("#test2").hide("fast");
})
});
></script>

HTML部分:
 

复制代码 代码示例:
<div id="test2" style="background: #666; right: 0px; bottom: 0px; position: absolute; width: 250px; height: 250px;">
<div style="width: 250px; height: 250px; position: relative;">
<div style="position: absolute; right: 10px; top: 10px; cursor: pointer;"><img id="gbb" src="images/guanbi.gif" alt="" /></div>
<a href="#"><img src="http://192.168.1.110/upload/2012/12/1/rui--logo.jpg" alt="" width="250px" height="250px" /></a>
</div>
</div>
 

原理:
把id=test2的div定位( position: absolute;)然后获取它在浏览器的top与left的值已达到定位的目的。

详细步骤:
1、浏览器载入页面时执行此函数。
 

$(document).ready(function(){}

2、当浏览器载入时,获取id=test2的div的top与left的值;
 

var menutop = $(window).height() - $("#test2").height();
var menuright = $(window).width() - $("#test2").width();

3、当滚动条滚动时执行以下函数。
 

$(window).scroll(function (){}

4、获取当滚动条滚动时,id=test2的div的top的值(div本来的值加上滚动条滚动的值);
 

var offsetTop = menutop + $(window).scrollTop();

5、把获取到的值放到赋予到css里面。
 

$("#test2").css("top",offsetTop );
$("#test2").css("left",menuright);

6、关闭隐藏div。
 

$("#gbb").click(function(){
$("#test2").hide("fast");
})

以上就是jquery实现右下角弹出广告代码的例子,大家注意代码注释中的说明,希望对大家有所帮助。