JS實(shí)現(xiàn)簡(jiǎn)單抖動(dòng)效果
廢話(huà)不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 100px; position: absolute; left: 400px; top: 200px; background: red; } </style> </head> <body> <div id="div1"></div> <script> var div1 = document.querySelector('#div1'); document.onclick = function () { /* * 抖動(dòng): * 1. 每次改變一下元素的位置 * 按照一個(gè)中心點(diǎn)進(jìn)行偏移,假設(shè)中心點(diǎn)left原始是400,那么每次就以left:400為中心做位置的移動(dòng) * 380 -> 420 * */ // div1.style.left = '380px'; // div1.style.left = '420px'; var a = true; setInterval(function() { /* * 根據(jù)a的值,做不同的設(shè)置 * */ div1.style.left = (a ? 380 : 420) + 'px'; a = !a; }, 30); } </script> </body> </html>
好了,代碼到此結(jié)束,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的,在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js檢測(cè)離開(kāi)或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測(cè)離開(kāi)或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2016-08-08js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法,方便一些提示重要日期的來(lái)臨,感興趣的小伙伴們可以參考一下2015-12-12js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法,以一個(gè)簡(jiǎn)單實(shí)例分析了JavaScript同時(shí)調(diào)用兩個(gè)函數(shù)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11iframe高度自適應(yīng)及隱藏滾動(dòng)條的實(shí)例詳解
這篇文章主要介紹了iframe高度自適應(yīng)及隱藏滾動(dòng)條的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09用幾道面試題來(lái)看JavaScript執(zhí)行機(jī)制
這篇文章主要介紹了JavaScript的執(zhí)行機(jī)制,對(duì)此感興趣的同學(xué),可以參考下2021-04-04關(guān)于微信中a鏈接無(wú)法跳轉(zhuǎn)問(wèn)題
微信頁(yè)面開(kāi)發(fā)時(shí),各個(gè)主頁(yè)之間的跳轉(zhuǎn),完全是通過(guò)a鏈接進(jìn)行的,但是來(lái)回跳轉(zhuǎn)幾次,再次從其他主頁(yè)面跳回首頁(yè)的時(shí)候,微信頭部出現(xiàn)了跳轉(zhuǎn)加載進(jìn)度條,但是就是不跳轉(zhuǎn),也沒(méi)有任何反應(yīng),怎么回事呢?下面小編給大家解答下2016-08-08