基于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 常用操作方法
Jan 28 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JavaScript实现切换多张图片
Jan 27 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图片缩放实现方法
2014/02/20 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python实现维吉尼亚算法
2019/03/20 Python
python求最大值最小值方法总结
2019/06/25 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
犯错检讨书
2014/02/21 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android