JavaScript 实现窗口抖动特效

作者:异步漫步时间:2026-10-22 16:13:54浏览:585

本文介绍如何使用JavaScript实现类似QQ窗口的抖动动画效果。通过控制元素的绝对定位属性,利用定时器循环改变坐标值,实现视觉上的抖动交互。

窗口抖动特效实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <style type="text/css"> #body{text-align:center;} #test{width:119px;position:absolute;margin:10px auto;height:114px;background:url(/images/logo.gif) ;border:2px dotted red;}      </style>         </head>   <body>         <div style='margin:10px 200px'>         <div><input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /></div>         <div><input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /></div>         <div id="test"></div>         </div>   </body> </html>  

注意:引入外部JS文件后,需要刷新页面才能执行相关代码。

作者最新文章