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. 20145202马超 2006-2007-2 《Java程序设计》第2周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要讲了各种变量的设置以及流程控制,基本上都和c是一样的.print是不太一样的, ...

  2. git 本地分支与远程分支 新建/删除/合并

    github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...

  3. webapi到处excel

    最近项目用的webapi前几天做了个导出excel功能,给大家分享下,自己也记录下... 在用的过程中,可以直接请求就可以得到下载的excel文件,在实际的项目中可以通过js打开新页面,encodeU ...

  4. 虚拟接VMnet1 和VMnet8的区别

    vmnet1是host-only,也就是说,选择用vmnet1的话就相当于VMware给你提供了一个虚拟交换机,仅将虚拟机和真实系统连上了,虚拟机可以与真实系统相互共享文件,但是虚拟机无法访问外部互联 ...

  5. 「Haskell 学习」二 类型和函数(上)

    随着学习的深入,笔记会补充和修订.当然,这个补充修订也许会鸽,但我一定会坚持写完. 这个笔记假定你至少学过C/C++及Python,或与这两种语言类型相同的语言. 类型系统概述 “Haskell’s ...

  6. Spring 整合 Shiro

    一.引入依赖 <!-- spring start --> <dependency> <groupId>org.springframework</groupId ...

  7. GFS文件系统

      1.1 分布式文件系统 1.1.1 什么是分布式文件系统 相对于本机端的文件系统而言,分布式文件系统(英语:Distributed file system, DFS),或是网络文件系统(英语:Ne ...

  8. 学习materialize

    <div class="container"> <div class="row">   </div> <div cla ...

  9. 官方文档:11G新特性SQL PLAN BASLINE 执行计划基线

    什么是SQL执行计划管理? SQL计划管理(SQL plan management)是一咱预防机制,记录和评估SQL语句的执行计划.SQL plan management的主要功能是sql plan ...

  10. python 生成csv乱码问题解决方法

    需求背景 最近为公司开发了一套邮件日报程序,邮件一般就是表格,图片,然后就是附件.附件一般都是默认写到txt文件里,但是PM希望邮件里的附件能直接用Excel这种软件打开,最开始想保存为Excel,但 ...