实例代码详解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 用6N±1法求素数 实例教程
Oct 20 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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队列的实现
2019/03/14 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python实现点对点聊天程序
2018/07/28 Python
python的常用模块之collections模块详解
2018/12/06 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
导师工作推荐信范文
2014/05/17 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
汽车转让协议书
2015/01/29 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫