基于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文字滚动停顿效果代码
Jun 28 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
js canvas实现5张图片合成一张图片
Jul 15 Javascript
Vue 修改网站图标的方法
Dec 31 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
简单JS代码压缩器
2006/10/12 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
腾讯广告词
2014/03/19 职场文书
读后感作文评语
2014/12/25 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
PHP策略模式写法
2021/04/01 PHP