信鸽网

jQuery自定义滚动条完整实例

  作者：bea

本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考，具体如下： 很多时候，由于美观上的考虑，往往需要自定义各种各样的滚动条，因此，本人做了一个demo 运行效果截图如下： 以下是代码部分： <html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(f

本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考，具体如下：


很多时候，由于美观上的考虑，往往需要自定义各种各样的滚动条，因此，本人做了一个demo


运行效果截图如下：



以下是代码部分：




<html>

  <head>

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <script>

    $(function(){

      //内容高度

      var content = $("#div2"); 

      //框的高度

      var box = $("#div1");

      //自定义的滚动条

      var scrollbar = $("#div3");

      var scroll=function(content,box,scrollbar){

        var bigHeight = content.height();

        var smallHeight = box.height();

        var rate = smallHeight/bigHeight;

        var h = Math.floor(rate*smallHeight);

        scrollbar.height(h);

        var offset = box.offset()

        var offsetT = offset.top+1;

        scrollbar.mousedown(function(e){

          var divOffsetT = scrollbar.offset().top;

          var tempT = e.pageY-divOffsetT;

          function move(e){

            var newH = e.pageY-tempT-offsetT;

            if(newH<0){

              newH=0;

            }else if(newH>(smallHeight-h)){

              newH=smallHeight-h;

            }

            var rate2 = (newH+h)/smallHeight;

            var contentH = Math.floor(bigHeight*rate2-smallHeight);

            content.css("top",-contentH+"px");

            scrollbar.css("top",newH+"px");

          }

          $("body").on("mousemove",move);

          $("body").mouseup(function(){

            $("body").off("mousemove",move);

          });

        });

      }

      scroll(content,box,scrollbar);

    });

    </script>

    <style>

      *{ margin:0; padding: 0;}

      body{ font-size: 12px;}

      #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;}

      #div2{ width: 180px; position: absolute; top: 0; left: 5px;}

      #div3{ width: 10px; position: absolute; top: 0; right:5px; background: #000;}

    </style>

  </head>

  <body>

    <div id="div1">

      <div id="div3"></div>

      <div id="div2">

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

        1<br>

      </div>

    </div>

    <textarea name="" id="txt" cols="30" rows="10"></textarea>

  </body>

</html>


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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: