首页 > 代码库 > js初学者的div移动
js初学者的div移动
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><meta name="keywords" content="div移动"><title>div移动</title></head><body> <div id="div" style="width:200px; position:absolute; height:200px; background-color:#F90; "></div> <!-- 做一个div 0.0 --> </body></html><script type="text/javascript"> var div = document.getElementById(‘div‘); document.onmousedown = function(e) //鼠标点击事件 { e = e || window.event; var tops = document.getElementById(‘div‘).offsetTop; //div四个角的坐标（200可变动） var lefts = document.getElementById(‘div‘).offsetLeft; var rights = lefts+200; var bottoms = tops+200; var mousex = e.pageX || e.clientX; //点击时的鼠标位置 var mousey = e.pagey || e.clientY; var topz = document.getElementById(‘div‘).getBoundingClientRect().top; //获取div的左上位置 var leftz = document.getElementById(‘div‘).getBoundingClientRect().left; if((mousex > lefts && mousex < rights)&&(mousey > tops && mousey < bottoms)) { //判断鼠标点击时是否在div中 document.onmousemove = function(e) //鼠标滑动事件 { var mousexx = e.pageX || e.clientX; //获取实时鼠标位置 var mouseyy = e.pagey || e.clientY; var xx = mousexx - mousex; //求移动的距离 var yy = mouseyy - mousey; leftzz = leftz + xx; topzz = topz + yy; div.style.left = leftzz +"px"; //对div的左上角进行计算，与鼠标移动的距离相同 div.style.top = topzz +"px"; } } } document.onmouseup = function(){ //鼠标抬起将滑动事件解除 document.onmousemove = null; }</script>
js初学者的div移动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。