類似QQ視窗的抖動效果的程式碼展示
- 伊谢尔伦原創
- 2017-06-16 10:51:421453瀏覽
類似QQ窗口的抖動效果，只是覺得好玩 技術含量比較簡單。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#body{text-align:center;}
#test{width:119px;position:absolute;margin:10px auto;height:114px;background:url(http://www.cnn6.net??/files/080516/1_005849.jpg) ;border:2px dotted red;}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div style='margin:10px 200px'>
<div><input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /></div>
<div><input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /></div>
<div id="test"></div>
</div>
</body>
</html>
<script type="text/javascript">
var m=document.getElementById("test");
function SKclass (obj,Rate,speed) {
var oL=obj.offsetLeft;
var oT=obj.offsetTop;
this.stop=null;
this.oTime=null;
this.state=0;
var om=this;
this.start=function(){
if(this.state==0){
ostart();
this.state=1;
}
else{alert("这样你受得了吗？")}
}
var ostart=function(){
if(parseInt(obj.style.left)==oL-2){
obj.style.top=oT+2+"px";
setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
}
else{
obj.style.top=oT-2+"px";
setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
}
om.oTime=setTimeout(function(){ostart()},speed);
}
this.stop=function(){
clearTimeout(om.oTime);
this.state=0;
}
}
var nn=new SKclass(m,20,50);
</script>以上是類似QQ視窗的抖動效果的程式碼展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn