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. 【转】谈谈 iOS 中图片的解压缩

    转自:http://blog.leichunfeng.com/blog/2017/02/20/talking-about-the-decompression-of-the-image-in-ios/ ...

  2. Python的入坑之路（1）

    (故事背景:由于涉及到机密的原因,暂时不方便透露,待后期再写.) 国庆长假过完之后,回来上班第二天下午,Boss跟龙哥把我叫了出去,问我要不要转人工智能.一脸懵逼的我,带着一脸懵逼听Boss说人工智能 ...

  3. android service笔记

    1.service 默认在主线程运行,所以不能在service中直接做访问网络,操作文件等耗时操作,要另外开启线程 2.通过startservice开启的服务,一旦服务开启,这个服务和开启他的调用者之 ...

  4. SVN 使用时的小错误

    在使用SVN的时候总是出现一些小问题,今天又出现了一个,诶,分享一下吧!  Error:(个人文件夹名http://www.qdjhu.com/anli_xq/f_wancheng.php)  is ...

  5. json与python解析

    1.json.dumps     将 Python 对象编码成 JSON 字符串   json.loads      将已编码的 JSON 字符串解码为 Python 对象 2.json.dump() ...

  6. python学习总结----内置函数及数据持久化

    抽象基类(了解) - 说明: - 抽象基类就是为了统一接口而存在的 - 它不能进行实例化 - 继承自抽象类的子类必须实现抽象基类的抽象方法 - 示例: from abc import ABC, abs ...

  7. [spring+tomcat]启动时报错：NoSuchMethodError: javax.servlet.http.HttpServletResponse.getStatus()I

    一般来讲问题的原因为tomcat版本较低, 建议升级到tomcat7x 以上版本

  8. 机器学习 (二) 多变量线性回归 Linear Regression with Multiple Variables

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang 的个人 ...

  9. User Agent的学习

    什么是User-Agent? User-Agent是一个特殊字符串头,被广泛用来标示浏览器客户端的信息,使得服务器能识别客户机使用的操作系统和版本,CPU类型,浏览器及版本,浏览器的渲染引擎,浏览器语 ...

  10. HashSet如何判定两个元素相同

    在介绍java的集合时,我们提到,set是一个"罐子".我们可以向其中放入各式各样的元素,这些元素没有顺序,但不能相同.其中,HashSet是最常用的一个实现类. 首先,我们看下H ...