类似QQ窗口的抖动效果的代码展示
程序员文章站
2022-06-01 15:46:28
...
类似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窗口的抖动效果的代码展示的详细内容，更多请关注其它相关文章！
推荐阅读
-
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
-
jquery实现弹出窗口效果的实例代码
-
基于JQuery的类似新浪微博展示信息效果的代码
-
javascript实现的仿腾讯QQ窗口抖动效果代码
-
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
-
JS相册图片抖动放大展示效果的示例代码
-
Android自定义view仿QQ的Tab按钮动画效果(示例代码)
-
AngularJs使用ng-repeat实现数据循环展示的效果（代码教程）
-
vue实现图片滚动的示例代码(类似走马灯效果)
-
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)