版权声明:Amazing刘许许的博客 https://blog.csdn.net/asedasdad/article/details/82050992
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
height: 100px;
position: absolute;
cursor: pointer;
}
/*div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}*/
p{
width: 30px;
height: 30px;
background: green;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<img src="aa.jpg" />
</body>
<script type="text/javascript">
var odiv = document.getElementsByTagName("img")[0];
function aa(){
var p = document.createElement("p");
document.body.appendChild(p);
p.style.left = odiv.offsetLeft+odiv.offsetWidth+"px";
p.style.top = odiv.offsetTop+p.offsetHeight/2+"px";
var count = odiv.offsetLeft+odiv.offsetWidth;
var timer1 = setInterval(function(){
count++;
p.style.left=count+"px";
if (parseInt(p.style.left)>1000) {
p.style.display="none";
clearInterval(timer1);
}
},1);
}
setInterval(aa,1000);
odiv.onmousedown=function(e){
var evt = e||window.event;
// var xx = evt.clientX-odiv.offsetLeft;
// var yy = evt.clientY-odiv.offsetTop;
var xx= evt.offsetX;
var yy = evt.offsetY;
document.onmousemove=function(e){
var evt = e||window.event;
var x = evt.clientX-xx;
var y =evt.clientY-yy;
odiv.style.left = x+"px";
odiv.style.top = y+"px";
return false;
}
document.onmouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</html>