你的位置:首页 > 软件开发 > Java > 为什么别人网页的滚动条辣么好看~

为什么别人网页的滚动条辣么好看~

发布时间:2017-11-30 06:00:06
其实我们一样可以很个性。。^_^效果实现:(附效果图)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&g ...

其实我们一样可以很个性。。^_^

效果实现:(附效果图)

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <style>   body,   html {    margin: 0;    width: 100%;    height: 100%;   }      ul,   li {    margin: 0;    padding: 0;    list-style: none;   }      .scrollBox {    width: 100%;    height: 100%;    overflow: hidden;    padding-right: 15px;    box-sizing: border-box;   }      .cBox {    width: 100%;    /*float: left;*/   }      .sBox {    width: 15px;    height: 100%;    /*float: right;*/    position: absolute;    top: 0;    right: 0;    background-image: linear-gradient(rgba(188,57,75,0.8) 0%,rgba(38,70,173,0.5) 100%);    box-shadow: 0 0 15px 3px rgba(0,0,0,0.5) inset;   }      li {    width: 100%;   }      img {    display: block;    width: 100%;   }      .tool {    width: 100%;    border-radius:7px;    position: relative;    left: 0px;    top: 0px;    text-align: center;    /*background-color: skyblue;*/    background-image: linear-gradient(skyblue 0%,pink 100%);    box-shadow: 0 0 20px 2px #FFFF99 inset;        cursor: pointer;   }  </style>  <script type="text/javascript">   window.onload = function() {    //获取触发滚动事件的元素    var scrollBox = document.querySelector('.scrollBox');    //创建滚动结构:    //--------------    //获取和子元素    var cBox = scrollBox.querySelector('.cBox');    var sBox = scrollBox.querySelector('.sBox');    var tool = scrollBox.querySelector('.tool');    initWheel();    //滚动条初始化    function initWheel() {     //计算滚动条高度     var H1 = cBox.offsetHeight;     var H2 = scrollBox.clientHeight;     var h1 = sBox.offsetHeight;     //求出h2的高度     var h2 = H2 / H1 * h1;     //     console.log(h2)     tool.style.height = h2 + 'px';     tool.style.lineHeight = h2 + 'px';    }     var site = tool.offsetTop;     var speed = 10;     wheel({      obj: scrollBox,      up: function() {       site -= speed;       //边界处理       if(site <= 0) {        site = 0;       }       tool.style.top = site + 'px';       cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + 'px';      },      down: function() {       site += speed;       //边界处理       if(site >= sBox.clientHeight - tool.offsetHeight) {        site = sBox.clientHeight - tool.offsetHeight;       }       tool.style.top = site + 'px';       cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + 'px';      }     });          //拖动滚动条     tool.onmousedown = function(ev){      var ev=ev||event;      ev.preventDefault();      var x1 = ev.clientX;      var y1 =ev.clientY;      document.onmousemove = function(ev){       var ev=ev||event;       ev.preventDefault();       var x2 = ev.clientX;       var y2 =ev.clientY;              var x = Math.abs(x2-x1);       var y = y2-y1;              //边界处理       var m =site+y;       if(m<=0){        m=0;       };       if(m>=sBox.clientHeight-tool.offsetHeight){        m=sBox.clientHeight-tool.offsetHeight;       };       tool.style.top=m+'px';       cBox.style.marginTop = -cBox.offsetHeight*(m/sBox.clientHeight)+'px';       if(x>200){//x超过滚动条200时取消事件        site = tool.offseetTop;//这里记录变化后的位置        document.onmousemove = null;       }      }      document.onmouseup = function(){       site = tool.offsetTop;//记录变化后的位置       document.onmousemove = null;      }     }          /*      *      * //滚轮事件方法:      * 功能:绑定滚轮事件      * 参数:      * option {      *      * obj: 触发事件的元素      * up: 滚轮向上滚动要执行的函数      * down: 滚轮向下滚动要执行的函数      *      * }      *      * */     function wheel(option) {      //自定义错误提示      if(!option) {       console.log('错误码10086:参数不正确');       return false;      }      var opt = {       obj: option.obj || documen,       up: option.up || null,       down: option.down || null,      };      opt.obj.onmousewheel = function(ev) {       var ev = ev || event;       if(ev.wheelDelta < 0) {        console.log('向下')        opt.down && opt.down();       }       if(ev.wheelDelta > 0) {        console.log('向上')        opt.up && opt.up();       }      }      opt.obj.addEventListener('DOMMouseScroll', function(ev) {       var ev = ev || event;       //           console.log(ev.detail);       if(ev.detail > 0) {        //     console.log('向下');        opt.down && opt.down();       }       if(ev.detail < 0) {        //             console.log('向上');        opt.up && opt.up();       }      });     }   }  </script> </head> <body>  <section >   <div >    <ul>     <li>      <img src='/images/loading.gif' data-original="img/1.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/2.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/3.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/4.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/5.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/6.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/7.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/8.jpg"  />     </li>     <li>      <img src='/images/loading.gif' data-original="img/9.jpg"  />     </li>    </ul>   </div>   <div >    <span href="javascript:;"></span>   </div>  </section> </body></html>

为什么别人网页的滚动条辣么好看~

各位大神有什么好的意见和指导敬请赐教~~

原标题:为什么别人网页的滚动条辣么好看~

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录