js事件高级应用02（带框拖拽、自定义滚动条）

最新推荐文章于 2021-11-13 21:20:06 发布

蔡蔡动起来

最新推荐文章于 2021-11-13 21:20:06 发布

阅读量373

点赞数

分类专栏：智能社_js 文章标签：带框拖拽自定义滚动条

本文链接：https://blog.youkuaiyun.com/weixin_40512519/article/details/82717094

版权

智能社_js 专栏收录该内容

22 篇文章

订阅专栏

带框拖拽：

 <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
        .box{
            border: 1px dashed black;
            position: absolute;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');

            var disX=0;
            var disY=0;



            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //带框拖拽
                var oBox=document.createElement('div');

                oBox.className='box';
                oBox.style.width=oDiv.offsetWidth-2+'px';//border也有宽
                oBox.style.height=oDiv.offsetHeight-2+'px';

                //如果不加这两行代码，我们在单击div时，虚框div会先出现在左上角
                oBox.style.left=oDiv.offsetLeft+'px';
                oBox.style.top=oDiv.offsetTop+'px';

                document.body.appendChild(oBox);




                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;
                    oBox.style.left=l+'px';
                    oBox.style.top=t+'px';


                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                    oDiv.style.left=oBox.offsetLeft+'px';
                    oDiv.style.top=oBox.offsetTop+'px';

                    document.body.removeChild(oBox);//鼠标松开后虚线框消失
                }
                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>
</head>
<body>
 <div id="div1"></div>
</body>

自定义滚动条：

<style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var oParent=document.getElementById('parent');


            var disX=0;

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;

                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;

                    if(l<0){
                        l=0;
                    }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }
                    oDiv.style.left=l+'px';


                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }
                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>
</head>
<body>

<div id="parent">
    <div id="div1"></div>
</div>
</body>

滚动条影响其他的div:

<style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 0px;
            height: 0px;
            background: green;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var oParent=document.getElementById('parent');
            var oDiv2=document.getElementById('div2');

            var disX=0;

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;

                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;

                    if(l<0){
                        l=0;
                    }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }
                    oDiv.style.left=l+'px';
                    var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                    document.title=l/scale;
                    oDiv2.style.width=400*scale+'px';
                    oDiv2.style.height=400*scale+'px';

                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }
                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>
</head>
<body>

<div id="parent">
    <div id="div1"></div>
</div>

<div id="div2"></div>

</body>

滚动条改变div的透明度。

 <style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: green;
            filter: alpha(opacity:0);
            opacity: 0;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var oParent=document.getElementById('parent');
            var oDiv2=document.getElementById('div2');

            var disX=0;

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;

                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;

                    if(l<0){
                        l=0;
                    }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }
                    oDiv.style.left=l+'px';
                    var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                    document.title=scale;
                    oDiv2.style.filter='alpha(opacity:'+scale*100+')';
                    oDiv2.style.opacity=scale;

                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }
                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>
</head>
<body>

<div id="parent">
    <div id="div1"></div>
</div>

<div id="div2"></div>
</body>

滚动文字：

  <style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 400px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }
        #div3{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var oParent=document.getElementById('parent');
            var oDiv2=document.getElementById('div2');
            var oDiv3=document.getElementById('div3');

            var disX=0;

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;

                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;

                    if(l<0){
                        l=0;
                    }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }
                    oDiv.style.left=l+'px';
                    var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                    document.title=scale;
                    oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';

                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }
                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>
</head>
<body>

<div id="parent">
    <div id="div1"></div>
</div>

<div id="div2">
    <div id="div3">
        网页新闻地图视频图片音乐购物知道
        希腊游船倾覆营养餐变素面首位绕月飞行乘客重庆走私冻品案赵文权捐赠1亿郑州工地发生爸爸感冒了，1岁半宝宝主动帮爸爸擦电磁炉，太懂事了
        同学聚会，同学并没有因为我开大众而疏远我，开宝马的都来敬我酒

        同学聚会，开国产车被合资车同学瞧不起，事后同学惭愧了

        租豪车参加同学聚会，假大款和真豪车刮擦，修车时假大款愣住了

        盘点被国人玩坏的车标，捷豹，奥迪都不算什么，最后一个才厉害！
        驾考系统升级！9月21日驾校考试暂停，没考驾照的要哭了
        号称最美SUV，终于要国产了，大胆换“心脏”，动力性能上一台阶！
        五十岁的60后、六十岁的50后的真实顺口溜，谁编的太有才了！
        卖不动就翻脸！13.98万一口气降到7.6万，誓要将捷达朗逸扫地出门
        电动车禁行后，老百姓如何出行？专家给出让人哭笑不得的建议

        又一合资车认怂，咬牙降至5.99万，年销47.89万辆，卡罗拉着急了
        这位车主火了，买12万的车就想睡女销售？还说提成好几万值了！
        这场车祸让它一战成名，被称为国产车的标杆！比在央视做广告还牛
        交警提醒：这4种驾驶行为已正式列入违章黑名单，抓一个罚一个！
        美国人停车车轮都是歪着的，但中国人停车都会回正，这是为什么？
        花2万元买一辆经典老车，这些老家伙你选谁？
    </div>
</div>

</body>