当前位置: 编程技术>jquery
jQuery右下角弹出广告代码兼容多浏览器
来源: 互联网 发布时间：2014-10-09
本文导语: 用jQuery写了个右下角弹出广告,经过测试完美支持各个浏览器。 需要JQ库，可以去jQurey官网去下载，下载后调入js文件，然后加上以下js： 代码示例: $(document).ready(function(){ var menutop = $(window).height() - $("#test2").height(); var menu...
用jQuery写了个右下角弹出广告,经过测试完美支持各个浏览器。
需要JQ库，可以去jQurey官网去下载，下载后调入js文件，然后加上以下js：
代码示例:
$(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");
})
});
>
HTML部分：
代码示例:
原理：
把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();
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);
$("#test2").css("left",menuright);
6、关闭隐藏div。
$("#gbb").click(function(){
$("#test2").hide("fast");
})
$("#test2").hide("fast");
})
以上就是jquery实现右下角弹出广告代码的例子，大家注意代码注释中的说明，希望对大家有所帮助。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。