js進階 12-3 如何實現元素跟隨鼠標移動

時間 2020-05-31

原文原文鏈接

js進階 12-3 如何實現元素跟隨鼠標移動

1、總結

一句話總結：獲取鼠標位置，將鼠標位置設置爲元素偏移便可。

一、用什麼事件獲取鼠標位置？

用mousemove能夠獲取鼠標移動的時候的位置javascript

 $(document).mousemove(function(e){

二、mousemove的調用對象是誰？

想知道在哪一個裏面動，就調誰，這裏是documentcss

 $(document).mousemove(function(e){

三、如何獲取鼠標的具體座標？

event對象的pageX和pageY屬性html

 $(document).mousemove(function(e){ //event.pageX/event.pageY鼠標相對於文檔的座標位置。 var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y)

四、動態測試變量的值用什麼方法好？

將值動態的顯示在標籤中，就像示例同樣。java

2、如何實現元素跟隨鼠標移動

一、相關知識

mousemove() 當鼠標指針在指定的元素中移動時觸發。

二、代碼

<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
    <meta charset="UTF-8">
    <title>演示文檔</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <style type="text/css"> #div1{width: 100px;height: 100px;background: orange;border-radius: 50px;position: absolute;}
    </style>
</style>
</head>
<body>
    <div id="div1"></div>
    <p>鼠標座標(mousemove):<input type="text" id="txt"></p>
    <script type="text/javascript"> $(document).mousemove(function(e){ //event.pageX/event.pageY鼠標相對於文檔的座標位置。
            var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y) $("#div1").css({ 'left':x, 'top':y }) }) </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。