javascript抖動(dòng)元素的小例子
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>xxxxxx</title>
<style>
#control {
height: 100px;
width: 100%;
background: gray;
}
</style>
<script>
function shake(e, onComplete, distance, interval)
{
if (typeof e === "string")
{
e = document.getElementById(e);
} // end if
distance = distance || 8;
interval = interval || 800;
var originalStyle = e.style.cssText;
e.style.position = "relative";
var start = (new Date()).getTime();
animate();
function animate()
{
var now = (new Date()).getTime();
var elapsed = now - start;
var progress = elapsed / interval;
if (progress < 1)
{
var y = distance * Math.sin(Math.PI * progress * 4);
var x = distance * Math.cos(Math.PI * progress * 4);
e.style.left = x + "px";
e.style.top = y + "px";
console.log(e.style.cssText);
setTimeout(animate, Math.min(25, elapsed));
} // end if
else
{
e.style.cssText = originalStyle;
if (onComplete)
{
onComplete(e);
} // end if
} // end else
} // end animate()
} // end shake()
</script>
</head>
<body>
<div id="control" onclick="shake(this);">
</div>
</div>
</body>
</html>
相關(guān)文章
JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
Fetch?API提供了一個(gè)JavaScript接口，用于訪問和操縱HTTP管道的部分。它還提供了一個(gè)全局?fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來跨網(wǎng)絡(luò)異步獲取資源。本文將詳解JS如何使用Fetch，感興趣的可以學(xué)習(xí)一下2022-05-05
JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了手機(jī)瀏覽器喚起微信分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
取一個(gè)DOM元素的兄弟節(jié)點(diǎn),仿jQuery的siblings方法,用原生JS代碼完成2011-08-08
Javascript圖像處理—閾值函數(shù)實(shí)例應(yīng)用
閾值是最簡(jiǎn)單的圖像分割方法,接下來將介紹五種閾值類型感興趣的朋友可以參考下2013-01-01
Bootstrap每天必學(xué)之按鈕，本文講解的就是大家最為常用的button按鈕的樣式，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript實(shí)現(xiàn)頁(yè)面無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript每天必學(xué)之事件,聊一聊事件冒泡與捕獲、事件冒泡的好處，感興趣的小伙伴們可以參考一下2016-09-09
本來想用css3來實(shí)現(xiàn)，但后來腦袋一熱就用了js，省的別人你ie怎么沒效果?。≡隍v訊微博app上看到的一個(gè)效果，鼠標(biāo)擊哪里就撕了哪里，跟撕報(bào)紙似的，任意點(diǎn)擊左邊面的灰色區(qū)域，查看效果，當(dāng)時(shí)覺得很有意思，問了下高人，突然覺悟了，原來如此。。2013-05-05