码迷,mamicode.com
首页 > Web开发 > 详细

js基础 -----鼠标事件

时间:2017-12-12 22:18:42      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:sem   round   down   etl   js基础   body   兼容性   sele   添加   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div></div>
<script> //获取需要拖拽的元素 var divs = document.querySelector(‘div‘); //元素的鼠标落下事件 divs.onmousedown = function(ev){ //event的兼容性 var ev = ev||event; //获取鼠标按下的坐标 var x1 = ev.clientX; var y1 = ev.clientY; //获取元素的left,top值 var l = divs.offsetLeft; var t = divs.offsetTop; //给可视区域添加鼠标的移动事件 document.onmousemove = function(ev){ //event的兼容性 var ev = ev||event; //获取鼠标移动时的坐标 var x2 = ev.clientX; var y2 = ev.clientY; //计算出鼠标的移动距离 var x = x2-x1; var y = y2-y1; //移动的数值与元素的left,top相加,得出元素的移动的距离 var lt = y+t; var ls = x+l; //更改元素的left,top值 divs.style.top = lt+‘px‘; divs.style.left = ls+‘px‘; } //清除 document.onmouseup = function(ev){ document.onmousemove = null; } } </script> </body> </html>

 

js基础 -----鼠标事件

标签:sem   round   down   etl   js基础   body   兼容性   sele   添加   

原文地址:http://www.cnblogs.com/LNning/p/8028982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!