基于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 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
理解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 MemCached 高级缓存应用代码
2010/08/05 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
基于empty函数的判断详解
2013/06/17 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python集合类型用法分析
2015/04/08 Python
Django自定义用户认证示例详解
2018/03/14 Python
python selenium操作cookie的实现
2020/03/18 Python
详解python程序中的多任务
2020/09/16 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
师范学院教师自荐书
2014/01/31 职场文书
初中班级口号
2014/06/09 职场文书
物理学专业求职信
2014/07/04 职场文书
银行进社区活动总结
2014/07/07 职场文书
语文复习计划
2015/01/19 职场文书
义诊活动通知
2015/04/24 职场文书
特种设备安全管理制度
2015/08/06 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Redis入门教程详解
2021/08/30 Redis
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python