本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考，具体如下：
这款网页上随滚动条滚动层代码，拖动滚动条即可看到效果，对联广告的代码也都是基于此的，右侧的浮动层同样是可以关闭的稍微加工，便可实现一个浮动广告的代码，运行一下，先看效果吧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>随滚动条滚动的层</title> <style> body{ margin:0; padding:0; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;} div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} img{ border:0;} ol,ul{list-style:none;} a{ text-decoration:none; color:#fff;} a:hover{ text-decoration:none;} #scroll_div{ width:100px; height:400px; background:#990; } #btn_close,#btn_gotop{ cursor:pointer;} </style> </head> <body> <div>头</div> <div> 我们提供各类编程源码、<br>素材、书籍教程、设计模板、<br>网页特效代码以及常用软件下载等，<br>做有质量的<br>学习型源码下载站。 <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div>底</div> <div id="scroll_div"> <span id="btn_close">关闭</span><br /> <span id="btn_gotop">返回顶部</span> </div> <script type="text/javascript"> var Bianyuan = { //添加事件2(DOM-保证this指向对象是obj) addEvent : function(obj, type, fn){ if (obj.attachEvent){ obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn](window.event);} obj.attachEvent('on'+type, obj[type+fn]); }else{ obj.addEventListener(type, fn, false); } }, //获取id元素 $ : function(id){ return document.getElementById(id); }, //取得浏览器可视区size getBrowserSize : function(){ var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ 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程序设计有所帮助。
【JS实现网页上随滚动条滚动的层效果代码】相关文章：