基于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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
js实现小时钟效果
Mar 25 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php中curl使用指南
2015/02/05 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
使用python分析git log日志示例
2014/02/27 Python
python快排算法详解
2019/03/04 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python判断自身是否正在运行的方法
2019/08/08 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
学校万圣节活动方案
2014/02/13 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript