用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实现右下角弹出广告代码的例子,大家注意代码注释中的说明,希望对大家有所帮助。