用JS实现网页浮动窗口随窗口滚动(类似于客服窗口)
2011-08-23 01:36
381 查看
这几天做网页,遇到一个JS问题,在首页就是实现一个小窗口,能随窗体滚动滚动,并且还要动态的。本人对JS不是很精通,经过一番苦研,现在把自己的随心所得写下来,同各位博友分享:
首先想到的是用JS来实现:
1,在IE浏览器中支持不太好,尤其是在IE6,
2,没有动态效果。
所以只能使用JS来动态根据scroll高度改变div的top属性,实现方法:
1,首先将上面css里的position值改为absolute,
2,添加下面代码:
本文出自 kevin's blog ,转载请标明出处:/article/10578387.html
首先想到的是用JS来实现:
.gmn_cart { width: 130px; z-index: 1; right: 5px; visibility: visible; position:fixed; top: 120px; border: 1px solid #7CBB12; }这样讲position的值设置为fixed,在FireFox和chrome里确实实现绝对定位,并随着窗体滚动始终呆在一个位置,这样写的缺点是:
1,在IE浏览器中支持不太好,尤其是在IE6,
2,没有动态效果。
所以只能使用JS来动态根据scroll高度改变div的top属性,实现方法:
1,首先将上面css里的position值改为absolute,
2,添加下面代码:
var fm=document.getElementById("gmn_cart"); function moveCart(){ var hy = (document.documentElement.scrollTop || document.body.scrollTop)+120; fm.style.top = hy+'px'; } setInterval(moveCart(),30);首先获得scrollTop,前面document.documentElement.scrollTop在IE浏览器中获取scroll方式,后者document.body.scrollTop是再其他浏览器中得用法。然后利用fm.style.top改变top的值。在这里需要叙述一下,因为浏览器的差异,fm.style.top = hy+'px';后面的+'px'一定要带上,如果不带的话,在IE中能识别,但是在其他浏览其中不能识别具体高度。然后设置一个定时函数,每隔30毫秒执行判断一次。但是这样在页面里设置一个定时的函数,老不大放心,感觉不好,(不知道为什么,还请高人指点。。),下面是加上Jquery后的写法:
var fm=document.getElementById("gmn_cart"); $(document).ready(function() { $(window).scroll(function(){ $(".gmn_cart").stop(); $(".gmn_cart").animate({top:(document.documentElement.scrollTop || document.body.scrollTop)+120},100); }); });这样一切OK,并且滑动效果也好。。。。。一开始没加
$(".gmn_cart").stop();导致,在IE浏览器中滑动非常缓慢。。。原来是,窗体滚动是触发了好几次,所以也就触发了多次animate函数,多个线程同时抢占同一资源,势必会造成线程阻塞,这样在前面加上一个stop不管有没有在动先停止了再说,保证只有一个线程在执行。如此看来,JS的确蕴含很多知识啊。。。。膜拜中。
本文出自 kevin's blog ,转载请标明出处:/article/10578387.html
相关文章推荐
- 用JS实现网页浮动窗口随窗口滚动(类似于客服窗口)
- 网页中实现浮动客服窗口
- 网页中实现浮动可隐藏客服窗口
- 网页中实现浮动客服窗口
- js实现从中间开始往上下展开网页窗口的方法
- js网页侧边随页面滚动广告效果实现
- js 右侧浮动层效果实现代码(跟随滚动)
- JS实现网页右侧带动画效果的伸缩窗口代码
- js实现浮动在网页右侧的简洁QQ在线客服代码
- js页面滚动时层智能浮动定位实现(jQuery)
- JS关闭窗口弹出新窗口,关闭新窗口时,刷新父窗口,JS代码实现刷新网页,js实现弹出窗口代码收集集萃
- js实现从右向左缓缓浮出网页浮动层广告的方法
- JS简单实现浮动窗口效果示例
- JQuery 实现的页面滚动时浮动窗口控件
- js两种实现网页图片滚动的方法 和一种切换的方法
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 兼容IE/FF/Chrome
- JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
- jquery实现浮动在网页右下角的彩票开奖公告窗口代码
- js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)