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