基于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 使用手册(一)
Sep 23 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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将数据导入到Foxmail
2006/10/09 PHP
聊天室php&amp;mysql(四)
2006/10/09 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
three.js加载obj模型的实例代码
2017/11/10 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
使用tensorflow实现线性svm
2018/09/07 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python range实例用法分享
2020/02/06 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
python开发制作好看的时钟效果
2022/05/02 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript