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. Xshell入门教程介绍

    免费软件 Xshell和 Xftp 都是 NetSarang 出品的优秀网络管理.安全传输工具.Xshell 是一个免费的安全终端仿真器,可以作为 SSH.TELNET 或 RLOGIN 的终端模拟, ...

  2. ubuntu设置ssh登陆

    转: 默认请况下,ubuntu是不允许远程登陆的.(因为服务没有开,可以这么理解.) 想要用ssh登陆的话,要在需要登陆的系统上启动服务.即,安装ssh的服务器端 $ sudo apt-get ins ...

  3. 自定义T4模板去掉实体对象中的下划线

            在EF Power Tool 默认使用的T4模板中,如果数据库表有下划线,那么生成的实体也有下划线,但是我们实际使用的过程中,是不希望有下划线的,要解决这个问题,可以自定义这个T4模板 ...

  4. NodeJs命令行新建项目实例

    安装Nodejs: 下载地址:http://nodejs.org/download/ 设置环境变量,例如我将nodejs装在D:/program文件夹下,则设以下为系统环境变量 D:\Program\ ...

  5. [leetcode-635-Design Log Storage System]

    You are given several logs that each log contains a unique id and timestamp. Timestamp is a string t ...

  6. multi-tap

    multi-tap又称 multi-press . 是在手机,或者电视遥控上的keypad定义,有如下2类标准: 1. ITU-T E.161 2.T9 使用举例如下: Consider a typi ...

  7. springmvc项目搭建五-postgresql+easyui的数据显示

    上一篇虽然完成了页面的显示,但是是假数据,本篇添加了postgresql的数据库,将登陆的校验和数据的显示都通过数据库来完成. 我是在本地搭建了一个postgre的数据库,就先新建两张表吧,一个用于用 ...

  8. 玩adb和fastboot

    http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380143fd3d1027fa3c215cc790a1b18 ...

  9. JavaScript内置对象常用

    Math 提供了数学中常用的属性和方法,使用时直接用Math.属性/方法,而不需要new一个Math对象 Date 使用Date对象来对日期和时间进行操作.使用时,必须用new创建一个实例 windo ...

  10. Java面试题-字符串操作

    题目:输入一行字符,分别统计出其中英文字母,空格,数字和其他字符个数 //创建一个容器,用来保存结果,英文字母空格数组和其他字符做key,个数为value Map<String,Integer& ...