这篇文章主要介绍了实例代码详解 javascript 实现窗口抖动及 qq 窗口抖动的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
窗口抖动效果在很多地方都有应用,例如网易的登陆窗口就有这样的效果,当登陆失败的时候就会出现抖动效果,这不但有动感,而且让人感觉新颖,下面是一段这样的代码实例,和大家分享一下。
代码如下:
- <!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,声明一个变量,作为定时器函数 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>15) {clearInterval(u); b=0} ,如果 b 的值大于 15,那么就停止抖动,并将 b 的值重置为 0。
7.function zd(){},声明一个函数。
8.clearInterval(u),停止定时器函数的运行,这句代码是为了防止连续点击按钮出现抖动可能不停止问题,因为两个抖动互相影响。
9.u=setInterval(fudu,30),使用定时器函数不断调用 fudu 函数。
10.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
11.var bt=document.getElementById("bt"),获取按钮对象。
12.var win=document.getElementById("win"),获取 div 对象。
13.bt.onclick=zd,为按钮注册事件处理函数。
下面给大家介绍仿 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 窗口抖动的相关内容,希望本段代码能够帮助到大家。
来源: http://www.phperz.com/article/17/0221/267778.html