JS實(shí)現(xiàn)簡(jiǎn)單抖動(dòng)效果
廢話不多說(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-08
js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法,方便一些提示重要日期的來(lái)臨,感興趣的小伙伴們可以參考一下2015-12-12
js+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-06
JavaScript實(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-11
iframe高度自適應(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

