让DIV实现抖动效果!
2024-10-13 10:27:25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript层抖动效果</title>
<style type="text/css">
#body{text-align:center;}
#test{width:200px;position:absolute;margin:10px auto;height:100px;border:2px dotted red;text-align:center}
</style>
</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">
<br>
</div>
</div>
<p> </p>
<p> </p>
</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;
var om=this;
this.start=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)
}
this.oTime=setTimeout(function(){om.start()},speed);
}
this.stop=function(){
clearTimeout(this.oTime); }
}
var nn=new SKclass(m,20,70);
</script>
</body>
</html>
最新文章
- [原][C#][winForm]分级基金折溢价WinForm网络计算器
- 定时器中实现数据库表数据移动的功能,Exception in thread ";Timer-0"; isExist java.lang.NullPointerException定时器中线程报错。
- GitHub学习心得之 安装配置与多帐号管理
- 纯window下VMware 安装 OS X El Capitan 原版映像【未完待续】
- html特殊字符转义问题(转!)
- inotify-tools使用方法介绍
- SpringMvc_@RequestMapping设置Router Url大小写不敏感
- oracle插入主键数据、sequence和触发器
- iptables学习笔记
- PKU 1511 Invitation Cards (SPFA+邻接表)
- Mapreuduce实现网络数据包的清洗工作
- 19 款仿 Bootstrap 后台管理主题免费下载
- Spring Cloud 组件 —— feign
- mybatis框架(3)---SqlMapConfig.xml解析
- 【转】宽带路由器应用(三)—ARP欺骗防护功能的使用
- Git分支合并:Merge、Rebase的选择
- 校内模拟赛 虫洞(by NiroBC)
- 在linux环境下,php语法出错,怎样让php编译后提示编译错误,错误在哪?
- Bootstrap 样式设计 栅格系统
- Android Webservices 返回多行多列数据(Dataset)