编程 Javascript

基于javascript实现窗口抖动效果

Posted in Javascript onJanuary 03, 2016

本文实例讲解了基于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实现窗口抖动效果

- Author -

愚蠢的神

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Stop SQL Server

Jun 21 Javascript

js类中的公有变量和私有变量

Jul 24 Javascript

学习ExtJS fit布局使用说明

Oct 08 Javascript

JavaScript高级程序设计读书笔记之十一内置对象Global

Mar 07 Javascript

jQuery 浮动导航菜单适合购物商品类型的网站

Sep 09 Javascript

对js中回调函数的一些看法

Aug 29 Javascript

基于jQuery实现中英文切换导航条效果

Sep 18 Javascript

Javascript this 函数深入详解

Dec 13 Javascript

vue移动端裁剪图片结合插件Cropper的使用实例代码

Jul 10 Javascript

使用jquery模拟a标签的click事件无法实现跳转的解决

Dec 04 jQuery

vue cli 3.x 项目部署到 github pages的方法

Apr 17 Javascript

vue轮播组件实现$children和$parent 附带好用的gif录制工具

Sep 26 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