JS实现网页上随滚动条滚动的层效果代码

时间：2021-05-26

本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考，具体如下：

这款网页上随滚动条滚动层代码，拖动滚动条即可看到效果，对联广告的代码也都是基于此的，右侧的浮动层同样是可以关闭的稍微加工，便可实现一个浮动广告的代码，运行一下，先看效果吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://pat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else{ pageWidth = document.body.clientWidth; pageWidth = document.body.clientHeight; } } //ie减去17滚动条宽度 if(!window.ActiveXObject){ pageWidth -= 17; } return { width : pageWidth, height : pageHeight } }, //获取滚动条高度 getPageScroll : function(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ yScroll = document.documentElement.scrollTop; } else if (document.body) { yScroll = document.body.scrollTop; } return yScroll; }}function scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o){ //滚动框宽高 var scrollBar = Bianyuan.$(scrollId), barWidth = scrollBar.offsetWidth, barHeight = scrollBar.offsetHeight; //可视区宽高 var pageWidth = Bianyuan.getBrowserSize().width, pageHeight = Bianyuan.getBrowserSize().height; //内容宽高 var widthMore = document.documentElement.scrollWidth, heightMore = document.body.scrollHeight||(document.documentElement.scrollHeight); //最大宽高 var maxWidth = Math.max(pageWidth, widthMore), maxHeight = Math.max(pageHeight, heightMore); scrollBar.style.position = 'absolute'; //设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏 if (maxHeight < (barHeight + footHeight + footHeight + 4)){ scrollBar.style.display = 'none'; }else{ //不挡顶部---如果想改距顶高度，改下边的第一个2值 scrollBar.style.top = Bianyuan.getPageScroll() + headHeight + 2 + 'px'; //不挡底部 if ((heightMore - Bianyuan.getPageScroll() - barHeight) <= footHeight){ scrollBar.style.top = heightMore - footHeight - barHeight - 2 + 'px'; } } //无视主体内容-左右 if (dir == 'left' && areaWidth == 1){ scrollBar.style.left = 2 + 'px'; }else if (dir == 'right' && areaWidth == 1){ scrollBar.style.left = maxWidth - barWidth - 2 + 'px'; //根据主体内容宽-左右 }else if (dir == 'left' && areaWidth != 1){ if (pageWidth >= (barWidth*2 + areaWidth + 4)){ scrollBar.style.left = (pageWidth - areaWidth)/2 - barWidth - 2 + 'px'; }else{ scrollBar.style.left = 2 + 'px'; } }else if (dir == 'right' && areaWidth != 1){ if (pageWidth >= (barWidth*2 + areaWidth + 4)){ scrollBar.style.left = (pageWidth - areaWidth)/2 + areaWidth + 2 + 'px'; }else{ scrollBar.style.left = maxWidth - barWidth - 2 + 'px'; } } //关闭和返回顶部 if (o){ if (o.btnClose){ var closeBtn = Bianyuan.$(o.btnClose); Bianyuan.addEvent(closeBtn, 'click', function(){ scrollBar.style.display = 'none'; }) } if (o.goTop){ var gotopBtn = Bianyuan.$(o.goTop); Bianyuan.addEvent(gotopBtn, 'click', function(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; }) } } //改变窗口大小或滚动条滚动 resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o);}function resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o){ window.onresize = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);} window.onscroll = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}}</script><script type="text/javascript">scrollBar("scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"});</script></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章