Maison > Article > interface Web > Comment implémenter l'effet de glissement du bouton gauche de la souris avec JavaScript
Comment implémenter l'effet de glissement du bouton gauche de la souris avec JavaScript
- 藏色散人avant
- 2020-05-12 16:52:002050parcourir
Deux façons d'obtenir l'effet glisser du bouton gauche de la souris :
Méthode 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div>
</div>
<script>
//制作一个鼠标左键拖拽效果
var div = document.getElementsByClassName("move")[0];
var style = window.getComputedStyle(div);
var divLeft = parseFloat(style.left);
var divTop = parseFloat(style.top);
div.onmousedown = function(e){
if(e.button !== 0){
return ;//不是鼠标左键，return
}
window.onmousemove = function(e){
divLeft += e.movementX;//距上次鼠标位置的X长度
divTop += e.movementY;//距上次鼠标位置的Y长度
div.style.left = divLeft + "px";
div.style.top = divTop + "px";
}
window.onmouseup = window.onmouseleave = function(){
if(e.button === 0){//鼠标左键
window.onmousemove = null;
}
}
}
</script>
</body>
</html>
Tutoriels vidéo associés recommandés : "Tutoriel avancé Javascript"
Méthode 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div>
</div>
<script>
//制作一个鼠标左键拖拽效果
var div = document.getElementsByClassName("move")[0];
var style = window.getComputedStyle(div);
div.onmousedown = function(e){
if(e.button !== 0){
return ;//不是鼠标左键，return
}
var divLeft = parseFloat(style.left);
var divTop = parseFloat(style.top);
var divPageX = e.pageX;
var divPageY = e.pageY;
window.onmousemove = function(e){
var disX = e.pageX - divPageX;
var disY = e.pageY - divPageY;
div.style.left = divLeft + disX + "px";
div.style.top = divTop + disY + "px";
}
window.onmouseup = window.onmouseleave = function(){
if(e.button === 0){//鼠标左键
window.onmousemove = null;
}
}
}
</script>
</body>
</html>Téléchargements recommandés associés : "Effets de texte"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Trois façons d'implémenter le saut d'itinéraire dans vueArticle suivant：Trois façons d'implémenter le saut d'itinéraire dans vue