Rumah > Artikel > hujung hadapan web > 类似QQ窗口的抖动效果的代码展示
类似QQ窗口的抖动效果的代码展示
- 伊谢尔伦asal
- 2017-06-16 10:51:421374semak imbas
类似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>Atas ialah kandungan terperinci 类似QQ窗口的抖动效果的代码展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用JavaScrip正则表达式验证form表单的方法Artikel seterusnya：15个常用的javaScript正则表达式