javascript抖動元素的小例子
<!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>
相關文章
JavaScript?Object.defineProperty與proxy代理模式的使用詳細分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
Fetch?API提供了一個JavaScript接口，用于訪問和操縱HTTP管道的部分。它還提供了一個全局?fetch()方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。本文將詳解JS如何使用Fetch，感興趣的可以學習一下2022-05-05
這篇文章主要介紹了JavaScript簡單實現鼠標移動切換圖片的方法,涉及JavaScript針對鼠標事件的響應及頁面元素的動態(tài)變換技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了手機瀏覽器喚起微信分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
取一個DOM元素的兄弟節(jié)點,仿jQuery的siblings方法,用原生JS代碼完成2011-08-08
閾值是最簡單的圖像分割方法,接下來將介紹五種閾值類型感興趣的朋友可以參考下2013-01-01
Bootstrap每天必學之按鈕，本文講解的就是大家最為常用的button按鈕的樣式，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細介紹了JavaScript實現頁面無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript每天必學之事件,聊一聊事件冒泡與捕獲、事件冒泡的好處，感興趣的小伙伴們可以參考一下2016-09-09
本來想用css3來實現，但后來腦袋一熱就用了js，省的別人你ie怎么沒效果啊！在騰訊微博app上看到的一個效果，鼠標擊哪里就撕了哪里，跟撕報紙似的，任意點擊左邊面的灰色區(qū)域，查看效果，當時覺得很有意思，問了下高人，突然覺悟了，原來如此。。2013-05-05