JavaScript实现窗口抖动与仿QQ窗口抖动效果详解

JavaScript实现窗口抖动效果

窗口抖动效果在许多应用场景中十分常见，例如网易登录窗口在登录失败时便会触发该动画。这种效果不仅增加了界面的动感，也提升了用户体验的新颖感。以下将通过具体代码实例进行分享。

具体实现代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript"> 
var a=['top','left'];
var b=0; 
var u;
function fudu()
{ 
 win.style[a[b%2]]=(b++)%4<2?"0px":"4px"; 
 if(b>15)
 {
 clearInterval(u);
 b=0
 } 
}
function zd()
{
 clearInterval(u); 
 u=setInterval(fudu,32) 
} 
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script> 
</head> 
<body > 
<button id="bt">点击振动</button> 
<div id="win"></div> 
</body> 
</html> 

在上述代码中，点击按钮后div元素会执行抖动动画。该示例主要用于演示原理，实际项目中可根据需求进行扩展。接下来将简要介绍其实现过程。

一、实现原理

该代码逻辑简单，核心原理也易于理解。div元素采用相对定位方式，点击按钮后，通过定时器函数setInterval()持续调用fudu()函数。该函数利用取模运算不断设置left或top属性值，即随机调整div的位置，从而产生抖动视觉效果。当变量b的值超过15时，抖动停止。

二、代码注释

1. var a=['top','left']：声明一个数组，存储字符串'top'和'left'。 2. var b=0：声明变量b并初始化为0。 3. var u：声明变量u，用于存储定时器函数setInterval()的返回值。 4. function fudu(){}：声明一个名为fudu的函数。 5. win.style[a[b%2]]=(b++)%4<2?"0px":"4px"：这是代码的核心部分。b%2的取模结果为0或1，作为数组a的索引以获取对应属性名。style[a[b%2]]的形式与直接设置style.top效果一致。通过判断(b++)%4是否小于2，分别为div的top和left属性赋值"0px"或"4px"。 6. if(b>15) {clearInterval(u); b=0}：当b的值大于15时，清除定时器以停止抖动，并将b重置为0。 7. function zd(){}：声明一个名为zd的函数。 8. clearInterval(u)：停止定时器运行。此步骤旨在防止连续点击按钮导致抖动无法停止的问题，避免多次抖动相互干扰。 9. u=setInterval(fudu,30)：使用定时器函数不断调用fudu函数，时间间隔为30毫秒。 10. window.onload=function(){}：确保文档内容完全加载完毕后，再执行函数内的代码。 11. var bt=document.getElementById("bt")：获取按钮对象。 12. var win=document.getElementById("win")：获取div对象。 13. bt.onclick=zd：为按钮注册点击事件处理函数。

仿QQ窗口抖动代码实现

接下来介绍仿QQ窗口抖动的JavaScript代码实现

这一抖动特效非常逼真，模拟了QQ聊天窗口的抖动效果。通过JavaScript代码配合模拟的聊天窗口图片，其效果与QQ原生的抖动功能颇为相似，颇具趣味性。

<title>仿QQ窗口抖动</title>
<img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg">
<br /><br />
<button onclick="zd()">让我抖一下！</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

通过上述实例代码，详细介绍了JavaScript实现窗口抖动及仿QQ窗口抖动的相关内容，希望这些代码能对大家有所帮助。