如何使光標停止/開始點擊光標

我對jquery仍然很陌生，想知道是否有人可以幫助我解決這個問題。我有一個小腳本，用於檢測光標的位置並在其後面顯示圖像。如果鼠標按鈕被點擊，我堅持如何讓圖像停止/開始跟蹤。任何人都可以幫我指出寫作方向嗎？如何使光標停止/開始點擊光標

<!doctype html> 
<head> 
<title>Follow</title> 
<link href="stylesheets/standard.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
$(document).ready(function() { 
$("html").mousemove(function (e) { 
var xPos = e.pageX; 
var yPos = e.pageY; 
$("#foxlocation").html("The fox is at: " + xPos + ", " + yPos); 
$("#imgFollow").offset({left:e.pageX,top:e.pageY}); 
}); 
}); 
</script> 
</head> 
<body> 
<h1>Test</h1> 
<h2 id="foxlocation"></h2> 
<img id="imgFollow" width="75px" height="75px" src="images/fox.jpg"></img> 
<footer>Test2</footer> 
</body> 
</html>

來源

2013-03-21 Upstart

$(document).ready(function() { 
    var init = true; 
    $(document).on('click', function() { 
     $(this)[init ? 'on' : 'off']('mousemove', follow); 
     init = !init; 
    }); 

    function follow(e) { 
     var xPos = e.pageX; 
     var yPos = e.pageY; 
     $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos); 
     $("#imgFollow").offset({ 
      left: e.pageX, 
      top: e.pageY 
     }); 
    } 
});

FIDDLE

編輯：

要使用初始化函數開始的，最簡單的是隻觸發點擊：

$(document).on('click', function() { 
     $(this)[init ? 'on' : 'off']('mousemove', follow); 
     init = !init; 
    }).trigger('click');

FIDDLE

來源

2013-03-21 21:25:49 adeneo

感謝您的快速回復！它工作的很好，我應該雖然這樣，但無論如何，它可以加載頁面的圖像已經跟隨，然後用戶將不得不點擊，使其停止，再次點擊，使其開始，而不是他們加載，然後點擊兩次開始下一步？ – Upstart 2013-03-21 21:28:10

或者至少在開始時點擊一次使其開始而不是兩次？ – Upstart 2013-03-21 21:28:49

@Upstart - 編輯答案！ – adeneo 2013-03-21 21:30:40

下面是一個例子：LIVE EXAMPLE

我的解決方案，圖像在頁面加載後直接跟隨鼠標移動而無需用戶交互

我使用的CSS屬性

#imgFollow{ 
    position:absolute; 
}

而你的代碼除了.css()而不是.offset()

$(document).ready(function() { 
    $(window).mousemove(function (e) { 
     var xPos = e.pageX; 
     var yPos = e.pageY; 
     $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos); 
     $("#imgFollow").css({ 
      left: e.pageX, 
      top: e.pageY 
     }); 
    }); 
});

來源

2013-03-21 21:28:52 sdespont

試試這個！

$(document).ready(function() { 
    $("html").mousemove(function (e) { 
     follow(e); 
    }) 
    .click(function() { 
     var foo = $.data(this, 'events').mousemove; 
     if(typeof foo = 'function') { 
      $(this).off('mousemove'); 
     } else { 
      $(this).mousemove(function (e) { 
      follow(e); 
      }); 
     } 
    }); 
}); 

function follow(e){ 
    var xPos = e.pageX; 
    var yPos = e.pageY; 
    $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos); 
    $("#imgFollow").offset({left:e.pageX,top:e.pageY}); 
}

來源

2013-03-21 21:35:35 Danwilliger

哦，無賴，adeneo打敗了我。 – Danwilliger 2013-03-21 21:38:11

如何使光標停止/開始點擊光標

回答

相關問題