滑鼠跟隨,顧名思義,就是在滑鼠移動的時候,有個動畫跟隨著滑鼠一起移動。
要點一: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實現簡單的點選返回頂部效果
當頁面特別長的時候,使用者想回到頁面頂部,必須得滾動好幾次滾動鍵才能回到頂部,如果在頁面右下角有個 返回頂部 的按鈕,使用者點選一下,就可以回到頂部,對於使用者來說,是乙個比較好的體驗。實現原理 當頁面載入的時候,把元素定位到頁面的右下角,當頁面滾動時,元素一直位於右下角,當使用者點選的時候,頁面回...