Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Zieheffekt der linken Maustaste mit JavaScript
So implementieren Sie den Zieheffekt der linken Maustaste mit JavaScript
- 藏色散人nach vorne
- 2020-05-12 16:52:002111Durchsuche
Zwei Möglichkeiten, den Drag-Effekt der linken Maustaste zu erzielen:
Methode 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>
Empfohlene verwandte Video-Tutorials: „Javascript Advanced Tutorial“
Methode 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>Verwandte empfohlene Downloads : „Texteffekte“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Zieheffekt der linken Maustaste mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Drei Möglichkeiten, Routensprung in Vue zu implementierenNächster Artikel：Drei Möglichkeiten, Routensprung in Vue zu implementieren