实例代码详解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性能优化小技巧整理
Nov 05 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
理解JS事件循环
Jan 07 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
js实现选项卡效果
Mar 07 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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(6) 面向对象
2010/02/16 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
three.js如何实现3D动态文字效果
2021/03/03 Javascript
Python 爬虫的工具列表大全
2016/01/31 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
实习生自荐信范文
2013/11/13 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
大学生村官任职感言
2014/01/09 职场文书
村委会贫困证明
2014/01/14 职场文书
好的旅游活动方案
2014/08/19 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python