Home > Article > Web Front-end > jQuery implementation of div following mouse movement method explained
jQuery implementation of div following mouse movement method explained
- 小云云Original
- 2018-01-12 09:24:281736browse
This article mainly introduces jQuery to implement p following the mouse movement in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
The key point is to figure out how to get the current position and position of the mouse, the current position and the position of p after the move:
Use jQuery to realize that p moves with the movement of the mouse, not the position of the mouse itself! ! But the movement of p relative to the previous position
The code is as follows: (pay attention to the explanation of the green part)
<!DOCTYPE html>
<html>
<head>
<meta charset="{utf-8}">
<title></title>
<script src="../jquery-3.2.0.js"></script>
<style>
.aa{
height: 100px;
width: 200px;
position: absolute;
background-color: green;
}
</style>
</head>
<body>
<p class="aa"></p>
</body>
</html>
<script>
$(".aa").mousedown(function(e){
//设置移动后的默认位置
var endx=0;
var endy=0;
//获取p的初始位置，要注意的是需要转整型，因为获取到值带px
var left= parseInt($(".aa").css("left"));
var top = parseInt($(".aa").css("top"));
//获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
var downx=e.pageX;
var downy=e.pageY; //pageY的y要大写，必须大写！！
// 鼠标按下时给p挂事件
$(".aa").bind("mousemove",function(es){
//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx= es.pageX-downx+left; //计算p的最终位置
var endy=es.pageY-downy+top;
//带上单位
$(".aa").css("left",endx+"px").css("top",endy+"px")
});
})
$(".aa").mouseup(function(){
//鼠标弹起时给p取消事件
$(".aa").unbind("mousemove")
})
</script>is different from the following code: ( The final effect is that p moves with the mouse position. If you want to see the specific effect, you can paste, copy and compare to see where the difference is)
<script>
$(".aa").mousedown(function(e){
$(document).bind("mousemove",function(e){
$(".aa").css("left",e.pageX).css("top",e.pageY)
});
})
$(".aa").mouseup(function(){
$(document).unbind("mousemove")
})
</script>Related recommendations:
10 classic web mouse special effects sections to share
jQuery mouse movement method to achieve magnification effect on pictures
WeChat How to implement mouse drag effect in mini program
The above is the detailed content of jQuery implementation of div following mouse movement method explained. For more information, please follow other related articles on the PHP Chinese website!