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


Posted in Javascript onJanuary 04, 2016

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

代码如下:

<!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窗口抖动的相关内容,希望本段代码能够帮助到大家。

Javascript 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
javascript基础语法学习笔记
Jan 04 #Javascript
封装好的javascript前端分页插件pagination
Jan 04 #Javascript
详解javascript的变量与标识符
Jan 04 #Javascript
bootstrap实现弹窗和拖动效果
Jan 03 #Javascript
基于javascript实现窗口抖动效果
Jan 03 #Javascript
理解jquery事件冒泡
Jan 03 #Javascript
实例讲解避免javascript冲突的方法
Jan 03 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP 图片水印类代码
2012/08/27 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python算法之栈(stack)的实现
2014/08/18 Python
python time模块用法实例详解
2014/09/11 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
美德少年事迹材料500字
2014/08/19 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2014年内勤工作总结
2014/11/24 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书