Home >Web Front-end >JS Tutorial >Code display similar to the jitter effect of QQ window

Code display similar to the jitter effect of QQ window

伊谢尔伦Original: 2017-06-16 10:51:421456browse

Similar to the jitter effect of QQ window, I just think it’s fun and the technical content is relatively simple.

<!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=&#39;margin:10px 200px&#39;>
<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>

The above is the detailed content of Code display similar to the jitter effect of QQ window. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to validate form using JavaScript regular expressionNext article：How to validate form using JavaScript regular expression

See more

Code display similar to the jitter effect of QQ window

Related articles