如何使光标停止/开始点击光标

我对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

如何使光标停止/开始点击光标

回答

相关问题