基于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 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
react-router JS 控制路由跳转实例
Jun 15 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
python之mock模块基本使用方法详解
2019/06/27 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python hashlib加密实现代码
2019/10/17 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
关于打架的检讨书
2014/01/17 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
学生个人评语大全
2015/01/04 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
OpenFeign实现远程调用
2022/08/14 Java/Android