반응형
jQuery-DIV로 커서 따라 가기
jQuery를 사용하여 DIV로 커서를 따라갈 수 있습니까?
으로 커서를 따라갈 수 없지만 커서를 움직일 때 DIVa를 그릴 수 있습니다 DIV!
$(document).on('mousemove', function(e){
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
});
그 div는 float에서 떨어져 position: absolute있어야하므로 설정해야합니다.
이것은 나를 위해 작동합니다. 좋은 지연된 행동이 진행되고 있습니다.
var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;
$(document).mousemove(function(e){
$mouseX = e.pageX;
$mouseY = e.pageY;
});
var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#moving_div").css({left:$xp +'px', top:$yp +'px'});
}, 30);
멋지고 단순한
이를 위해 jQuery가 필요하지 않습니다. 다음은 간단한 작업 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>box-shadow-experiment</title>
<style type="text/css">
#box-shadow-div{
position: fixed;
width: 1px;
height: 1px;
border-radius: 100%;
background-color:black;
box-shadow: 0 0 10px 10px black;
top: 49%;
left: 48.85%;
}
</style>
<script type="text/javascript">
window.onload = function(){
var bsDiv = document.getElementById("box-shadow-div");
var x, y;
// On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
window.addEventListener('mousemove', function(event){
x = event.clientX;
y = event.clientY;
if ( typeof x !== 'undefined' ){
bsDiv.style.left = x + "px";
bsDiv.style.top = y + "px";
}
}, false);
}
</script>
</head>
<body>
<div id="box-shadow-div"></div>
</body>
</html>
position: fixed;스크롤이 문제가되지 않도록 선택했습니다 .
참고 URL : https://stackoverflow.com/questions/3385936/jquery-follow-the-cursor-with-a-div
반응형
'Nice programing' 카테고리의 다른 글
| NoSQL 데이터베이스를 사용하는 전자 상거래 웹 사이트가 있습니까? (0) | 2020.10.18 |
|---|---|
| has_and_belongs_to_many 대 has_many through (0) | 2020.10.18 |
| 프로그램 종료 전에 작업 수행 (0) | 2020.10.18 |
| 특정 클래스의 div를 감지하는 jquery가 DOM에 추가되었습니다. (0) | 2020.10.18 |
| C # 6에서 문자열 보간과 함께 이스케이프 문자를 사용하는 방법은 무엇입니까? (0) | 2020.10.18 |