A5下载文章资讯

分类分类

基于javascript实现窗口抖动效果

2016-01-05 08:47作者:fang

本文实例讲解了基于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程序设计有所帮助,帮助大家实现窗口抖动效果。

展开全部

相关

说两句网友评论
    我要跟贴
    取消