用js實現簡單的滑鼠跟隨效果

2022-03-27 04:32:57 字數 1295 閱讀 9877

滑鼠跟隨,顧名思義,就是在滑鼠移動的時候,有個動畫跟隨著滑鼠一起移動。

要點一:var

oevent

=evt

||window.event;  這個是為了相容ie和ff而寫的,在ie下window.event表示event物件,而ff下,是給事件函式傳乙個引數,這個引數就表示事件物件。

要點二:

document.onmousemove

=function

(evt)    滑鼠跟隨是在滑鼠移動時發生的事情。

要點三:

document.documentelement.scrolltop 

||document.body.scrolltop;這是為了相容chrome和其它瀏覽器,滾動條距上邊滾動的距離,chrome用後邊那個,其它瀏覽器用前面那個。

要點四:

otop.style.top

=oevent.clienty

+scrolltop +10

+"px"

;  當滑鼠移動時把滑鼠的當前位置賦值給元素的位置值。

oevent.clienty即為滑鼠的當前y座標的位置,加scrolltop的距離是要在滾動到不是第一屏的時候,滑鼠跟隨效果依然不改變而寫。

**如下:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>無標題文件

title

>

<

style

>

body

#to_top

style

>

<

script

>

window.onload

=function()}

script

>

head

>

<

body

style

="height:1000px;"

>

<

a href

="#"

>文字

a>

<

div

id="to_top"

>滑鼠跟隨

div>

body

>

html

>

js實現滑鼠拖拽效果

拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效果了。上面這個原理也可以演變為 拖拽原理2 拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效...

JS實現跟隨滑鼠的提示框

諸葛亮 a 霍去病 a 唐太宗 a 武則天 a msg div body text css a msg style js window.onload function oas i onmouseout function oas i onmousemove function ev 上述 為什麼要在座標...

用js實現簡單的點選返回頂部效果

當頁面特別長的時候,使用者想回到頁面頂部,必須得滾動好幾次滾動鍵才能回到頂部,如果在頁面右下角有個 返回頂部 的按鈕,使用者點選一下,就可以回到頂部,對於使用者來說,是乙個比較好的體驗。實現原理 當頁面載入的時候,把元素定位到頁面的右下角,當頁面滾動時,元素一直位於右下角,當使用者點選的時候,頁面回...