实例代码详解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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
js对象基础实例分析
Jan 13 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
关于uniApp editor微信滑动问题
Jan 15 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读注册表
2006/10/09 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php加密解密字符串示例
2016/10/13 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序地图实现展示线路
2020/07/29 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python:socket传输大文件示例
2017/01/18 Python
python中正则表达式的使用方法
2018/02/25 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
单身联谊活动方案
2014/01/29 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
工作感言一句话
2015/08/01 职场文书
2016年教师节感言
2015/12/09 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫