JS實(shí)現(xiàn)簡(jiǎn)單抖動(dòng)效果
更新時(shí)間：2017年06月01日 08:42:16 作者：catEatBird
這篇文章給大家結(jié)束了通過js實(shí)現(xiàn)抖動(dòng)效果，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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é)束，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了BootStrap TreeView使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
js檢測(cè)離開或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測(cè)離開或刷新頁(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)方法，方便一些提示重要日期的來臨，感興趣的小伙伴們可以參考一下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)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
用幾道面試題來看JavaScript執(zhí)行機(jī)制
這篇文章主要介紹了JavaScript的執(zhí)行機(jī)制，對(duì)此感興趣的同學(xué)，可以參考下2021-04-04
微信頁(yè)面開發(fā)時(shí)，各個(gè)主頁(yè)之間的跳轉(zhuǎn)，完全是通過a鏈接進(jìn)行的，但是來回跳轉(zhuǎn)幾次，再次從其他主頁(yè)面跳回首頁(yè)的時(shí)候，微信頭部出現(xiàn)了跳轉(zhuǎn)加載進(jìn)度條，但是就是不跳轉(zhuǎn)，也沒有任何反應(yīng)，怎么回事呢？下面小編給大家解答下2016-08-08