마우스 움직임을 따르도록 div를 구현하는 jQuery의 코드 예
- PHPz원래의
- 2017-11-18 13:31:084101검색
이전 글에서는 JavaScript로 마우스 따라가기 구현 예를 자세히 분석했는데, 오늘은 마우스 움직임을 따라가기 위해 jQuery를 DIV로 구현한 사례를 소개해드리겠습니다.
핵심은! 마우스의 현재 위치와 이동 후의 위치, p의 현재 위치와 이동 후의 위치를 얻으려면:
jQuery를 사용하여 p가 마우스 자체의 위치가 아니라 마우스의 움직임에 따라 움직인다는 것을 알아보세요! ! 하지만 이전 위치를 기준으로 p의 움직임
코드는 다음과 같습니다. (녹색 부분의 설명에 주의하세요)
더 많은 특수 효과 리소스를 보려면 php 특수 효과 다운로드 채널을 방문하세요: 마우스 특수 효과
<!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>는 다음 코드 조각과 다릅니다. (최종 효과는 p가 마우스 위치에 따라 이동한다는 것입니다. 특정 효과를 보려면 붙여넣기, 복사 및 비교를 통해 차이점을 확인할 수 있습니다. )
<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>요약:
이 기사는 샘플 코드를 사용하여 모든 사람에게 jQuery 구현을 소개합니다. 내 친구들은 마우스 움직임에 따른 DIV 사례에 대해 어느 정도 이해하고 있다고 믿습니다. 작업에 도움이 되기를 바랍니다~
관련 권장사항:
JQuery 효과를 기반으로 한 간단한 마우스 따라가는 프롬프트 효과
위 내용은 마우스 움직임을 따르도록 div를 구현하는 jQuery의 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 마우스 추종 효과 구현다음 기사：JavaScript 마우스 추종 효과 구현