用js實現簡單的點選左右運動

2022-03-27 04:32:56 字數 1379 閱讀 3847

如下圖,點選向右,方塊向右移動,點選向左,方塊向左移動。

可以用setinterval來實現過多長時間,div移動多長的距離來實現運動效果。

要點一:如果元素的左邊距離小於目標距離,則是正向移動,否則是負向移動

if(run.offsetleft 要點二:如果元素的左邊距離等於目標距離,停止定時器,否則,元素的左邊距離等於現在的左邊距離加上速度值。

if(run.offsetleft ==target)

else

上**

doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""

>無標題文件

title

>

<

style

>

body

#run

style

>

<

script

>

window.onload

=function

()btn1.onclick

=function

()function

startrun(target)

else

if(run.offsetleft

==target)

else

},30)}

}script

>

head

>

<

body

>

<

input

id="btn"

type

="button"

value

="運動向右"

>

<

input

id="btn1"

type

="button"

value

="運動向左"

>

<

div

id="run"

>

div>

body

>

html

>

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

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

用js實現點選複製文字

function copytext ele else 移除選中的元素 window.getselection removeallranges 對於這段 的相容性,實際使用中對於大多的普通瀏覽器和android端都是比較相容的,但移動端uc和qq瀏覽器有乙個小問題,原因是因為uc中document.e...

JS 運動的實現

1.停不下來 給定時器新增timer 來判斷是否需要停止 2.到目的地,還能點選移動,把移動的 放入else中 3.重複點選按鈕會加速運動 是因為點一次就會啟動一次定時器,多次就會啟動多次 保證只有乙個定時器在啟動,啟動一次就關閉上一次啟動定時器 運動框架 1 啟動就關閉定時器 2 if else ...