JavaScript基础鼠标拖拽

最新推荐文章于 2019-11-12 19:30:29 发布

魇默

最新推荐文章于 2019-11-12 19:30:29 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/qq_40398734/article/details/78097880

版权

事件冒泡

图片

这里写图片描述

代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #000000;
                float: left;
                margin: 10px 20px;
            }
            div p{
                background-color: gray;
                color: #FFFFFF;
                text-align: center;
                height: 50px;
                line-height: 50px;
            }
        </style>

        <script>

            var a = 0;//声明
            var b = 0;
            var c = 0;
            var d = 0;
            var e = 0;

            //鼠标移动事件
            function myMove(){
                a++; // a = a + 1;
                var font = document.getElementById("a");//获取font标签对象
                font.innerHTML = a;
            }

            //鼠标移入事件over
            function myOver(){
                b++;
                var font = document.getElementById("b");//获取font标签对象
                font.innerHTML = b;
            }

            //鼠标移出事件out
            function myOut(){
                c++;
                var font = document.getElementById("c");//获取font标签对象
                font.innerHTML = c;
            }

            //鼠标移入事件enter
            function myEnter(){
                d++;
                var font = document.getElementById("d");//获取font标签对象
                font.innerHTML = d;
            }

            //鼠标移出事件leave
            function myLeave(){
                e++;
                var font = document.getElementById("e");//获取font标签对象
                font.innerHTML = e;
            }

        </script>

    </head>
    <body>

        <div onmousemove="myMove()">
            <font id="a">0</font>
            <p>鼠标移动事件onmousemove</p>
        </div>

        <!--事件冒泡-->
        <div onmouseover="myOver()">
            <font id="b" style="border: 1px solid #000000;">0</font>
            <p>鼠标移入事件onmouseover</p>
        </div>

        <div onmouseout="myOut()">
            <font id="c">0</font>
            <p>鼠标移出事件onmouseout</p>
        </div>

        <div onmouseenter="myEnter()">
            <font id="d">0</font>
            <p>鼠标移入事件onmouseenter</p>
        </div>

        <div onmouseleave="myLeave()">
            <font id="e">0</font>
            <p>鼠标移出事件onmouseleave</p>
        </div>

    </body>
</html>

滚动条事件

图片

这里写图片描述

代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .cont{
                height: 10000px;
            }
            #top{
                position: fixed;
                width: 100%;
                height: 50px;
                top: 0px;
                left: 0px;
                background-color: pink;
                display: none;
            }

            #left{
                position: fixed;
                top: 150px;
                left: 20px;
                height: 500px;
                width: 50px;
                background-color: green;
                display: none;
            }
            #left ul{
                list-style: none;
                padding-left: 0px;
            }
            #left ul li{
                border: 1px solid gray;
                margin: 15px auto;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }

            .a{
                border: 1px solid #FFFFFF;
                color: #FFFFFF;
            }

        </style>

        <script>

//          var a = 0;

            //滚动事件
            function myScroll(){
//              a++;

                var i = document.body.scrollTop;
                var top = document.getElementById("top");
                var left = document.getElementById("left");
                var f1 = document.getElementById("f1");
                var f2 = document.getElementById("f2");
                var f3 = document.getElementById("f3");
                var f4 = document.getElementById("f4");
                var f5 = document.getElementById("f5");

                //控制顶部
                if(i >= 1000){
                    top.style.display = "block";
                    top.innerHTML = i;
                }else{
                    top.style.display = "none";
                }

                //控制左侧
                if(i >= 2000){
                    left.style.display = "block";
                }else{
                    left.style.display = "none";
                }

                //显示楼层
                if(i >= 2000 && i<=2500){
                    f1.className = "a";
                    f2.className = "";
                    f3.className = "";
                    f4.className = "";
                    f5.className = "";
                }else if(i>2500 && i<=3000){
                    f1.className = "";
                    f2.className = "a";
                    f3.className = "";
                    f4.className = "";
                    f5.className = "";
                }else if(i>3000 && i<=3500){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "a";
                    f4.className = "";
                    f5.className = "";
                }else if(i>3500 && i<=4000){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "";
                    f4.className = "a";
                    f5.className = "";
                }else if(i>4000 && i<=4500){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "";
                    f4.className = "";
                    f5.className = "a";
                }

            }

        </script>

    </head>
    <body onscroll="myScroll()">

        <div id="left">
            <ul>
                <li id="f1">1F</li>
                <li id="f2">2F</li>
                <li id="f3">3F</li>
                <li id="f4">4F</li>
                <li id="f5">5F</li>
            </ul>
        </div>

        <div id="top"></div>
        <div class="cont"></div>

    </body>
</html>

计算鼠标偏移量

图片

这里写图片描述

代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #000000;
                margin-top: 20px;
                margin-left: 30px;
            }
        </style>
        <script>

            //判断鼠标是否按下
            var isDown = false;

            //实时监听鼠标位置
            var moveX = 0;
            var moveY = 0;

            //记录鼠标按下瞬间的位置
            var x = 0;
            var y = 0;

            //鼠标按下时移动的偏移量
            var mouseMoveX = 0;
            var mouseMoveY = 0;

            //div的位置
            var div_x = 0;
            var div_y = 0;

            function myWheel(){
                var cont = document.getElementById("cont"); 
                cont.style.fontSize = "40px";
            }


            //鼠标移动事件
            function myMove(event){
                moveX = event.clientX;
                moveY = event.clientY;
                var cont = document.getElementById("cont"); 
                var mess2 = document.getElementById("mess2");

                cont.innerHTML = "x="+moveX+",y="+moveY;

                //计算鼠标移动偏移量
                mouseMoveX = moveX - x;
                mouseMoveY = moveY - y;

                //当鼠标按下时才执行
                if(isDown){
                    var new_div_x = div_x + mouseMoveX;
                    var new_div_y = div_y + mouseMoveY;

                    //改变div的位置
                    cont.style.marginTop = new_div_y;
                    cont.style.marginLeft = new_div_x;

                    mess2.innerHTML = "鼠标移动的偏移量为：x="+mouseMoveX+",y="+mouseMoveY+"<br>"+
                                        "DIV新位置：x="+new_div_x+",y="+new_div_y;
                }


            }

            //鼠标按下事件
            function myDown(event){
                x = event.clientX;
                y = event.clientY;
                isDown = true;

                var mess = document.getElementById("mess");

                var cont = document.getElementById("cont");
                //获取DIV的位置
                div_x = cont.offsetLeft;
                div_y = cont.offsetTop;

                mess.innerHTML = "鼠标按下了，当前鼠标位置：x="+x+",y="+y+"<br>"+
                                "DIV的位置：x="+div_x+",y="+div_y;
            }

            //鼠标松开事件
            function myUp(){
                var mess = document.getElementById("mess");
                mess.innerHTML = "鼠标松开了";
                isDown = false;
                mouseMoveX = 0;
                mouseMoveY = 0;
            }

        </script>
    </head>
    <body>

        <div id="cont" onwheel="myWheel()" onmouseup="myUp()" onmousedown="myDown(event)"  onmousemove="myMove(event)">

        </div>
        <font id="mess"></font><br>
        <font id="mess2"></font>

    </body>
</html>