JS实现网页上随滚动条滚动的层效果代码
内容摘要
本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考,具体如下:
这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,
这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,
文章正文
本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考,具体如下:
这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧。
运行效果截图如下:
在线演示地址如下:
http://demo.phpstudy.net/js/2015/js-web-fixed-scroll-adv-codes/
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 | <!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 style= " width:1002px;height:42px;margin:0 auto; background-color:#060;" >头</div> <div style= "width:1002px; margin:0 auto; background-color:#f60;" > 我们提供各类编程源码、<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 style= " width:1002px;height:95px;margin:0 auto; background-color:#060;" >底</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程序设计有所帮助。
代码注释