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提示抖动实现方法的更多相关文章

  1. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  2. JavaScript弹出窗口方法

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...

  3. ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

    ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...

  4. 【转】 C#后台调用前台javascript的五种方法

    第一种,OnClientClick    (vs2003不支持这个方法)<asp:ButtonID="Button1" runat="server" Te ...

  5. Android和JavaScript相互调用的方法

    转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...

  6. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

  7. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  8. 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 ...

  9. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

随机推荐

  1. SpringMVC接收前端传值有哪些方式?

    有很多种,比如: 1.通过@RequestParam注解接收请求参数: 2.通过Bean封装,接收多个请求参数 3.通过@ModelAttribute绑定接收前端表单数据 4.通过@PathVaria ...

  2. MVC5使用单选按钮与下拉框【转】

    某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了.测试代码如下: 1.model类Blog.cs(类型使用枚举类型,自动生成的视图会以下拉列表形式显示): using S ...

  3. Entity Framework 数据生成选项DatabaseGenerated【转】

    在EF中,我们建立数据模型的时候,可以给属性配置数据生成选项DatabaseGenerated,它后有三个枚举值:Identity.None和Computed. Identity:自增长 None:不 ...

  4. Python: 列表的两种遍历方法

    方法一:以列表中元素的下标进行访问 def traverse1(list1): for i in range(len(list1)): print(list1[i], end=' ') print() ...

  5. guacamole实现剪切复制

    主要功能是实现把堡垒机的内容复制到浏览器端,把浏览器端的文本复制到堡垒机上. 借助一个中间的文本框,现将堡垒机内容复制到一个文本框,然后把文本框内容复制出来.或者将需要传递到堡垒机的内容先复制到文本框 ...

  6. TortoiseSVN的安装使用

    下面分享一篇关于TortoiseSVN的安装以及使用 1.运行TortoiseSVN-1.6.6.17493-win32-svn-1.6.6.msi程序, 开始安装 2.点击Next, 下一步 3.选 ...

  7. session、token、cookie的区别

    token就是令牌,比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件cookie就是写在客户端的一个txt文件,里面包括你登录信息之类的,这样你下次在登录某个网站,就会自动调用co ...

  8. Jmeter——小性能用例

    1.添加默认值,将代理服务器写入 2.添加HTTP请求头,将域名部分用变量形式写入:${__CSVRead(D:/number.txt,0)},这是为了查询不同页面,在D:/number.txt路径下 ...

  9. 多图片上传(base64方式传至后台)

    <!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" conten ...

  10. Htmlemail邮件发送

    /** * * @param path //发送附件路径 * @param name //附件名称 * @param hostName //邮件服务器名称 * @param port //服务器端口 ...