基于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动画animate方法使用介绍
May 06 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
微信jssdk用法汇总
Jul 16 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 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不用正则采集速度探究总结
2008/03/24 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Array对象方法参考
2006/10/03 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Django框架模板介绍
2019/01/15 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
优秀求职信范文分享
2014/01/26 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
社区两委对照检查材料
2014/08/23 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL