位置: 编程技术 - 正文

实例代码详解javascript实现窗口抖动及qq窗口抖动(示例代码)

编辑：rootadmin

推荐整理分享实例代码详解javascript实现窗口抖动及qq窗口抖动(示例代码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:java代码案例,java实例代码,java 代码大全,java代码讲解视频,java示例代码,一段java代码的详细解说,java实例代码,java实例代码,内容如对您有帮助，希望把文章链接给更多的朋友！

窗口抖动效果在很多地方都有应用，例如网易的登陆窗口就有这样的效果，当登陆失败的时候就会出现抖动效果，这不但有动感，而且让人感觉新颖，下面是一段这样的代码实例，和大家分享一下。

代码如下:

以上代码中，当点击按钮的时候，div会出现抖动效果，当然此效果比较简单，这里仅仅是演示之用，在实际应用中可以自行扩展，下面简单介绍一下实现过程。

一.实现原理:

代码简单，原理也是非常简单。div是采用相对定位，当点击按钮的时候，就会通过定时器函数setInterval()不断调用fudu()函数，此函数可以通过取模的方式来不断的设置left或者top的属性值，也就是不断随机的调整div的位置，这样就实现了抖动效果，当b的值大于的时候，停止抖动。

二.代码注释:

1.var a=['top','left'],声明一个数组，里面存储有top和left字符串。2.var b=0，声明一个变量b并赋值为0。3.var u，声明一个变量，作为定时器函数setInterval()的返回值。4.function fudu(){}，声明一个函数。5.win.style[a[b%2]]=(b++)%4<2&#;"0px":"4px"，此段代码是核心部分，b%2取模运算的值为0或1，这样就成为数组a的索引值用于获取数组中的值。style[a[b%]这种形式和style.top这种形式的效果是一样的。]]=(b++)%4<2&#;"0px":"4px"，这样通过取模判断值是否小于2，来对div的top和left属性赋值。6.if(b>) {clearInterval(u); b=0} ，如果b的值大于，那么就停止抖动，并将b的值重置为0。7.function zd(){}，声明一个函数。8.clearInterval(u)，停止定时器函数的运行，这句代码是为了防止连续点击按钮出现抖动可能不停止问题，因为两个抖动互相影响。9.u=setInterval(fudu,)，使用定时器函数不断调用fudu函数。.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。.var bt=document.getElementById("bt")，获取按钮对象。.var win=document.getElementById("win")，获取div对象。.bt.onclick=zd，为按钮注册事件处理函数。

下面给大家介绍仿QQ窗口抖动的JavaScript代码

很不借的抖动特效，仿QQ聊天窗口的抖动效果，这里是用JavaScript代码实现，在配上这个假聊天窗口，没想到竟然和QQ的抖动效果还真相似，挺逗人。

通过以上实例代码给大家介绍javascript实现窗口抖动及qq窗口抖动的相关内容，希望本段代码能够帮助到大家。

基于JavaScript实现移除(删除)数组中指定元素在Array对象中有给定的函数可以删除数组中指定的元素，虽然非常好用，但是总感觉看不到摸不着的比较别扭，下面就分享一个自定义的删除数组指定索

学习javascript面向对象理解javascript对象一、编程思想面向过程:以过程为中心，自顶向下逐步细化，程序看成一系列函数调用的集合面向对象:对象作为程序的基本单元，程序分解为数据和相关

学习javascript面向对象掌握创建对象的9种方式本文为大家分享了javascript创建对象的9种方式，供大家参考，具体内容如下【1】使用Object构造函数[缺点]使用同一个接口创建很多对象，会产生大量重复