首页 > 其他 > 详细

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

时间:2018-07-23 23:13:32      阅读:186      评论:0      收藏:0      [点我收藏+]
<!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>

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!