码迷,mamicode.com
首页 > 其他好文 > 详细

位置随机且可拖动的小方块

时间:2018-07-23 23:32:29      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:creat   eve   move   client   pen   cli   ++   down   target   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80px;
height:80px;
position:absolute;
}
</style>
<script>

function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
}

function createEle(){
var oDiv=document.createElement(‘div‘);
oDiv.style.background=‘rgb(‘+rnd(0,256)+‘,‘+rnd(0,256)+‘,‘+rnd(0,256)+‘)‘;
oDiv.style.left=rnd(0,1600)+‘px‘;
oDiv.style.top=rnd(0,700)+‘px‘;
return oDiv;
}
window.onload=function() {
for(var i=0;i<rnd(20,40);i++){
var oDiv=createEle();
document.body.appendChild(oDiv);
}
var aDiv=document.getElementsByTagName(‘div‘);
document.onmousedown=function(ev){
var oEvent=ev||event;
var oTarget=oEvent.target||oEvent.srcElement;
if(oTarget.tagName==‘DIV‘){
var disX=oEvent.clientX-oTarget.offsetLeft;
var disY=oEvent.clientY-oTarget.offsetTop;

document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oTarget.style.left=l+‘px‘;
oTarget.style.top=t+‘px‘;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
}
</script>
</head>
<body>

</body>
</html>

位置随机且可拖动的小方块

标签:creat   eve   move   client   pen   cli   ++   down   target   

原文地址:https://www.cnblogs.com/myhanyu/p/9357337.html

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