基于javascript实现窗口抖动效果


Posted in Javascript onJanuary 03, 2016

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下

效果图:

基于javascript实现窗口抖动效果

鼠标点击,窗口实现抖动。

具体代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<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>

希望本文所述对大家学习javascript程序设计有所帮助,帮助大家实现窗口抖动效果。

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
javascript函数特点实例分析
May 14 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
原生js实现简单轮播图
Oct 26 Javascript
理解jquery事件冒泡
Jan 03 #Javascript
实例讲解避免javascript冲突的方法
Jan 03 #Javascript
详解js中class的多种函数封装方法
Jan 03 #Javascript
js中利用tagname和id获取元素的方法
Jan 03 #Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 #Javascript
基于javascript实现简单计算器功能
Jan 03 #Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
You might like
PHP中include与require使用方法区别详解
2013/10/19 PHP
php中Snoopy类用法实例
2015/06/19 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php时间函数用法分析
2016/05/28 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python自动扫雷实现方法
2015/07/25 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python的链表基础知识点
2020/09/13 Python
python opencv肤色检测的实现示例
2020/12/21 Python
numba提升python运行速度的实例方法
2021/01/25 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
材料化学应届生求职信
2013/10/09 职场文书
入党积极分子介绍信
2014/01/17 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
新郎结婚保证书
2015/02/26 职场文书
名人传读书笔记
2015/06/26 职场文书
结婚典礼主持词
2015/06/29 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python