本文提供了一个使用JavaScript实现HTML元素抖动效果的完整代码示例。通过结合CSS相对定位与setTimeout递归调用，利用正弦和余弦函数计算X、Y轴偏移量，实现平滑的抖动动画。代码包含可选的完成回调、距离及间隔参数配置，适用于前端交互中的视觉反馈场景。
JavaScript元素抖动特效代码实现与原理详解
具体实现代码如下所示：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>xxxxxx</title>
<style>
#control {\n height: 100px;\n width: 100%;\n background: gray;\n }
</style>\n <script>\n function shake(e, onComplete, distance, interval)\n {\n if (typeof e === "string")\n {\n e = document.getElementById(e);\n } // end if\n distance = distance || 8;\n interval = interval || 800;
var originalStyle = e.style.cssText;\n e.style.position = "relative";\n var start = (new Date()).getTime();
animate();
function animate()\n {\n var now = (new Date()).getTime();\n var elapsed = now - start;\n var progress = elapsed / interval;\n if (progress < 1)\n {\n var y = distance * Math.sin(Math.PI * progress * 4);\n var x = distance * Math.cos(Math.PI * progress * 4);\n e.style.left = x + "px";\n e.style.top = y + "px";\n console.log(e.style.cssText);\n setTimeout(animate, Math.min(25, elapsed));\n } // end if\n else\n {\n e.style.cssText = originalStyle;\n if (onComplete)\n {\n onComplete(e);\n } // end if
} // end else
} // end animate()
} // end shake()
</script>\n </head>\n <body>
<div id="control" onclick="shake(this);">\n </div>
</div>
</body>\n </html>