js簡単な画像のドラッグ効果を実現します。
この文章の例は、簡単な画像のドラッグ効果を実現するためのjsの具体的なコードを共有しています。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
//
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style>
div{position:fixed;width:100px;height:100px;
background-image:url(images/xiaoxin.gif);
background-size:100%;
}
</style>
</head>
<body>
<div id="pop"></div>
<script>
let pop = document.getElementById("pop")
// ,
let canMove = false;
// , div
let offsetX,offsetY;
// pop
pop.onmousedown=function(e){
//
canMove=true;
offsetX=e.offsetX;
offsetY=e.offsetY;
}
//
window.onmousemove=function(e){
// pop
if(canMove==true){
// pop
// ，
// pop top left
let left=e.clientX-offsetX;
let top=e.clientY-offsetY;
// pop top left
pop.style.left=left+"px";
pop.style.top=top+"px";
}
}
// pop
pop.onmouseup=function(){
//
canMove=false
}
</script>
</body>
</html>以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。