javascript提示抖动实现方法
css代码：
<style type="text/css">
#div1{ width:200px; height:200px; background-color:orange; border:solid 5px #f0f0f0; position:absolute; left:600px; top:200px;}
</style>
js代码：
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onclick=function(){
shake(oDiv,'left');
}
}
//封装抖动方法
function shake(obj,attr){
var arr=[];
var timer=null;
var num=0;
var pos=parseInt(getStyle(obj,attr)); //通过数组实现抖动的频率
for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0); //设置定时器实现抖动
clearInterval(timer);
timer=setInterval(function(){
obj.style[attr]=pos+arr[num]+'px';
num++;
if(num==arr.length){
clearInterval(timer);
}
},20)
} //获取元素属性方法
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
</script>
HTML：
<body>
<div id="div1"></div>
</body>
javascript提示抖动实现方法的更多相关文章
- JavaScript常用对象的方法和属性
---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...
- JavaScript弹出窗口方法
本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...
- ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后
ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...
- 【转】 C#后台调用前台javascript的五种方法
第一种,OnClientClick (vs2003不支持这个方法)<asp:ButtonID="Button1" runat="server" Te ...
- Android和JavaScript相互调用的方法
转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...
- JavaScript document属性和方法
JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes 存储节点的属性列表 ...
- 将JavaScript 插入网页的方法
将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...
- wamp出现You don’t have permission to access/on this server提示的解决方法
本地搭建wamp 输入http://127.0.0.1访问正常,当输入http://localhost/ apache出现You don't have permission to access/on ...
- js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法
var questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...
随机推荐
- android ActionBar 去掉menu分隔线
自定义Theme继承原来Theme修改其中的分隔线: <item name="actionBarDivider">@null</item> 低版本设置 & ...
- 指纹识别人脸识别 iOS
//1.判断iOS8及以后的版本 if([UIDevice currentDevice].systemVersion.doubleValue >= 8.0){ //从iPhone5S开始,出现指 ...
- Linux-Shell脚本编程-学习-8-函数
在这章往后的学习中,我讲尽可能详细的讲书中讲到的都记录到这里,以便以后方便查看. 什么是函数,函数就是一段代码,这段代码可以在我们需要的位置调用,那么这段代码就叫做函数. 在Shell中,定义一个函数 ...
- python中socket、socketio、flask-socketio、WebSocket的区别与联系
socket.socketio.flask-socketio.WebSocket的区别与联系 socket 是通信的基础,并不是一个协议,Socket是应用层与TCP/IP协议族通信的中间软件抽象层, ...
- [USACO19JAN]Cow Poetry
题面 Solution: 这是一道很好的dp题. 一开始看不懂题面没有一点思路,看了好久题解才看懂题目... \(y[i]\) 为第 \(i\) 个词结尾,\(l[i]\) 为第 \(i\) 个词长度 ...
- 当因式分解遇见近邻:一种多层面协同过滤模型（SVD++）
本文地址:https://www.cnblogs.com/kyxfx/articles/9392086.html actorization Meets the Neighborhood: a Mult ...
- Go基础篇【第1篇】: 内置库模块 OS
os包提供了操作系统函数的不依赖平台的接口.设计为Unix风格的,虽然错误处理是go风格的:失败的调用会返回错误值而非错误码.通常错误值里包含更多信息.os包的接口规定为在所有操作系统中都是一致的.非 ...
- POJ 2182 / HDU 2711 Lost Cows（平衡树）
Description N (2 <= N <= 8,000) cows have unique brands in the range 1..N. In a spectacular di ...
- eclipse快捷键（复制自己看）
1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shift+F2 显示搜索对话框:Ctrl+H快速O ...
- Xampp+Openfire+Spark的简单使用
Openfire与Spark的简单实用 1.安装Openfire 百度云 提取码:uu11 2.查找路径 /usr/local/openfire 这时候需要将openfire的文件属性都设置为 可读可 ...