基于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 Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
详解Document.Cookie
Dec 25 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
js实现图片放大展示效果
Aug 30 Javascript
javascript中的隐式调用
Feb 10 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
浅析PHP Socket技术
2013/08/02 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Python迭代用法实例教程
2014/09/08 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
全面了解python字符串和字典
2016/07/07 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python新手学习raise用法
2020/06/03 Python
如何编写python的daemon程序
2021/01/07 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
员工考核管理制度
2014/02/02 职场文书
项目经理任命书内容
2014/06/06 职场文书
小学生常见病防治方案
2014/06/06 职场文书
医院保洁服务方案
2014/06/11 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript