基于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/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
python 不关闭控制台的实现方法
2011/10/23 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python内置函数dir详解
2015/04/14 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python 爬虫的工具列表大全
2016/01/31 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python 支付整合开发包的实现
2019/01/23 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python和JavaScript哪个容易上手
2020/06/23 Python
市场部规章制度
2014/01/24 职场文书
人民教师求职自荐信
2014/03/12 职场文书
教研活动总结
2014/04/28 职场文书
安全检查汇报材料
2014/12/26 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
高三化学教学反思
2016/02/22 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
分析Python list操作为什么会错误
2021/11/17 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS