JS 事件基礎跟隨滑鼠移動

阿新 • • 發佈：2019-01-27

做一個div跟隨滑鼠移動
注意事項：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因為clientX和clientY都是網頁可視區座標，沒有加被滾動區間的座標

    <style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
    </style>
    <script>
    document.onmousemove=function 
(ev)
    {
        var oDiv=document.getElementById('div1');
        var oEvent=ev||event;

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

        oDiv.style.left=oEvent.clientX+scrollLeft+'px' 
;
        oDiv.style.top=oEvent.clientY+scrollTop+'px';
    }
    </script>
 </head>
 <body style="width:2000px; height:2000px">
    <div id="div1"></div>
 </body>
 </html>

可以將獲取滑鼠座標封裝成一個函式getPos，如下：

    //封裝一個函式，用來獲取滑鼠座標
    function getPos(ev)
    {
        var scrollTop=document 
.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

        return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
    }

    document.onmousemove=function(ev)
    {
        var oDiv=document.getElementById('div1');
        var oEvent=ev||event;

        var pos=getPos(oEvent); 

        oDiv.style.left=pos.x+'px';
        oDiv.style.top=pos.y+'px';
    }
    </script>

JS 事件基礎跟隨滑鼠移動

做一個div跟隨滑鼠移動注意事項：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因為clientX和clientY都是網頁可視區座標，沒有加被滾動區間的座標 <style> #d

js事件基礎（事件event物件,事件冒泡，滑鼠鍵盤事件）

事件物件（獲取事件的詳細資訊）和事件冒泡：什麼是event物件：獲取事件的詳細資訊：滑鼠位置、鍵盤按鍵。 document本質：document.childNodes[0].tagName 獲取event物件（相容性寫法）：var

圓點自動跟隨滑鼠移動

思路：在畫布上繪製一個圓點，在移動滑鼠時用背景圖覆蓋上一次的圖片，然後再在這張背景圖上繪製一個原點，利用定時器每隔10ms進行一次重新整理<!doctype html><html><head> <title>test</title> &l

UGUI跟隨滑鼠移動

using UnityEngine; using UnityEngine.EventSystems; public class DragUIMove : MonoBehaviour, IPointer

js案例圖片跟著滑鼠移動

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

簡單的跟隨滑鼠移動

html <!DOCTYPE><html> <head> <link href="css/lianxi.css" type="text/css" rel="stylesheet"> <script type="text/javascrip

div跟隨滑鼠移動+上浮定位+移動放置新增與刪除

html程式碼 <html lang="zh-CN"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <meta charset="utf-8

實現div在固定區域跟隨滑鼠移動點選拖動而產生的變化

一、思路 1.在外層增加一個 DIV 容器，並設定好容器的大小。（即：寬和高）當容器存在邊框的時候，由於這裡還沒找到獲取的方法，所以，在容器邊框大於 0 的時候，獲得的容器的限制區域的座標會有誤差。為了避免這情況，可以在多加一次容器，有邊框樣式的在外層，無邊框樣子的在內層。例： <

jquery加CSS3實現導航跟隨滑鼠移動

經常看到有的網頁導航選單下有個底部邊框跟隨滑鼠移動到的位置而移動仔細想了下，如果只用jquery來實現發現會變得複雜，那麼我們知道CSS3裡有過度屬性transition 一.transition屬性的使用方法： - 要實現這一點，必須規定兩項內容：

[Unity][UGUI]獲得滑鼠對應螢幕的座標，圖片跟隨滑鼠移動

Input.mousePositionusing System.Collections; using System.Collections.Generic; using UnityEngine; public class Test_Mouse : MonoBehaviour

標籤在滑鼠按下後跟隨滑鼠移動,相容低版本IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

jS事件基礎應用

下拉選單  <!DOCTYPE html> <html

物體跟隨滑鼠移動

Debug.Log("x="+Input.mousePosition.x);表示在螢幕的x Debug.Log("y=" + Input.mousePosition.y);表示在螢幕的y Debug.Log("height" + S

js核心基礎之Events事件機制（移動端事件、PC端事件、事件穿透）

PC端在pc端，網頁的操作都是用滑鼠的，即響應的都是滑鼠事件，包括mousedown、mouseup、click，通常，click事件會在mouseup之後觸發，會在300ms之後，因為，會憑藉這個時間去判斷是否觸發雙擊事件（不準確） 1、mo

JS動態生成的元素，其對應的方法不響應（比如單擊事件，滑鼠移動事件等）

主要原因：在頁面給元素註冊點選事件的時候【 $(function () { XXX }); 】，JS動態生成的元素還尚未生成，所以click事件就沒有生效解決方法：方案一：js動態生成元素後再給其註冊事件【註冊事件放在動態生成的js下面（js是從上往下執行的，當註冊事件的時候元素已經生成了

node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作

nod server nbsp node i++ 兩個 con 錯誤定時器第四章建議學習時間3小時課程共10章學習方式：詳細閱讀，並手動實現相關代碼學習目標：此教程將教會大家安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏

js實現滑鼠移動到div背景顏色變換，移開還原

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js重溫</title> </head> <div id="sss"

JS實現圖片隨著滑鼠自由移動

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

jq實現跟隨滑鼠點選移動的下劃線效果

效果如下： 1.html程式碼： 1 <div class="center-left-tap"> 2 <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" oncli

JS實現滑鼠移動後面跟隨著特效

要實現的效果是,滑鼠在移動的過程中,滑鼠尾巴後面跟著一些小特效,: 這是滑鼠移動到時候,後面跟隨著小特效其實原理就是遍歷出所有的div小方塊然後每一個小方塊都跟隨自己前面的小方塊, 第一個小方塊就跟隨滑鼠,當滑鼠移動的時候,就會出現這樣的效果 css程式碼:給小方塊設定樣式

JS 事件基礎 跟隨滑鼠移動

相關推薦

JS 事件基礎跟隨滑鼠移動