javascript

来源：互联网发布：云计算服务是什么意思编辑：程序博客网时间：2024/06/03 22:48
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            body{                margin: 0;                padding: 0;            }            div{                width: 200px;                height:200px;                border: 1px solid #000000;            }        </style>        <script>            //判断鼠标是否按下            var isDown = false;            //实时监听鼠标位置            var moveX = 0;            var moveY = 0;            //记录鼠标按下瞬间的位置            var x = 0;            var y = 0;            鼠标按下时移动的偏移量            var mouseMoveX = 0;            var mouseMoveY = 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){                    mess2.innerHTML = "鼠标移动的偏移量为：x="+mouseMoveX+",y="+mouseMoveY;                }            }            //鼠标按下事件        function myDown(event){                x = event.clientX;                y = event.clientY;                isDown = true;                var mess = document.getElementById("mess");                mess.innerHTML = "鼠标按下了，当前鼠标位置：x="+x+",y="+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>
这里写图片描述
阅读全文
0 0