JS 实现自定义滚动条实现透明度控制和滚动条

最新推荐文章于 2022-12-02 01:55:04 发布

diantiaozhu8383

最新推荐文章于 2022-12-02 01:55:04 发布

阅读量323

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/junxi/p/5228536.html

版权

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
     *{
        margin:0px;
        padding:0px;
        list-style: none;
     }
     #parent{
        width: 600px;
        height: 12px;
        position: relative;
        top: 12px;
        left: 200px;
        background: #ff00ff;
     }
     #childer{
        width: 12px;
        height: 12px;
        position: absolute;
        background: #675389;
     }
     #div1{
        width: 300px;
        height: 300px;
        background: #ff8876;
        margin:100px auto;
        opacity: 0;
        filter:alpha(opacity=0);
     }
     #div3{
        position: relative;
        top:10px;
        left:50px;
        width: 300px;
        height: 300px;
        overflow: hidden;
        border:1px solid #ff00ff;
     }
     #div4{
        position: absolute;
        top:0px;
        left:0px;
        word-break: break-all;
        word-wrap: break-word;
      }
    </style>
    <script>
      function getpos(ev){
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
      var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
       return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop};

        }
       function addEvent(obj,even,fn){ /*事件绑定*/
          return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn);
        }
       function unEvent(obj,even,fn){
          return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn);
        }
      window.οnlοad=function(){
        var oparent=document.getElementById("parent");
            ochildes=document.getElementById("childer");
            odiv1=document.getElementById("div1");
            odiv3=document.getElementById("div3");
            odiv4=document.getElementById("div4");
            disX=0;
            disY=0;
     addEvent(ochildes,"mousedown",function(ev){
         var eventer=ev||event;
             pos=getpos(eventer);
             disX=pos.x-ochildes.offsetLeft;
             disY=pos.y-ochildes.offsetTop;
             if(ochildes.setCapture){
               ochildes.οnmοusemοve=mouseMove;
               ochildes.οnmοuseup=mouseUp;
               ochildes.setCapture();
               return false;
             }else{
                document.οnmοusemοve=mouseMove;
                document.οnmοuseup=mouseUp;
                 return false;
             }

         })
            function mouseMove(ev){
                  var eventer=ev||event;
                  pos=getpos(eventer);
                  ochildes.style.left=pos.x-disX+"px";
                  ochildes.style.top=0+"px";
                  if(ochildes.offsetLeft<0){
                     ochildes.style.left=0+"px";
                  }
                  if(ochildes.offsetLeft>oparent.offsetWidth-ochildes.offsetWidth){
                    ochildes.style.left=oparent.offsetWidth-ochildes.offsetWidth+"px";    
                  }
                var scale=ochildes.offsetLeft/(oparent.offsetWidth-ochildes.offsetWidth);
                     odiv1.style.opacity=scale;
                     odiv1.style.filter="alpha(opacity:"+scale*100+")";
                     odiv4.style.top=-(scale*(odiv4.offsetHeight-odiv3.offsetHeight))+"px";
             }
             function mouseUp(){
                 unEvent(ochildes,"mousedown");
                  this.οnmοusedοwn=null;
                  this.οnmοusemοve=null;
                 /* if(ochildes.releaseCapture){
                     ochildes.releaseCapture();
                  } */
                  
                 }
           
      }
    </script>
</head>
<body>
   <div id="parent">
       <div id="childer"></div>
   </div> 
   <div id="div1"></div>
   <div id="div3">
       <div id="div4">sssssssssssssssssssssssss
       ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssvvvv
       </div>
   </div>
</body>
</html>

转载于:https://www.cnblogs.com/junxi/p/5228536.html

diantiaozhu8383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 实现自定义滚动条实现透明度控制和滚动条

<!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" xml:lang="en">...
复制链接

扫一扫