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. HBase 是什么

    Apache HBase™ is the Hadoop database, a distributed, scalable, big data store. HBase 是 Hadoop databa ...

  2. WPF中InkCanvas(墨水面板)用法

    原文:WPF中InkCanvas(墨水面板)用法   WPF中InkCanvas(墨水面板)用法                                                    ...

  3. php复制目录很浪

    一不小心搞出个超级深层次文件夹 主要是因为懒,在网上随便找了段复制文件夹的代码贴上了,结果是很恐怖,一个文件夹复制到他自身里面的时候,将会产生循环嵌套文件夹,后果是,windows因为文件名太长而无法 ...

  4. 4 class类 web服务器

    1.换行符 2.pycharm 连接Ubuntu 1)添加环境变量 2)查看ip 3)配置目录 4)上传或者下载 3.面向对象抽象web服务器 1)版本1:类 class HttpServer(obj ...

  5. Vue-router用法

    #全局守卫- router.beforeEach(to,from,next){} #全局后置钩子- router.afterEach(to,from){} #路由独享守卫- beforeEnter(t ...

  6. 如何理解Java中参数传递只能传值？

    以前学习C#的时候,是完全在工作岗位上学习,一些底层较为深入的道理都不是很清楚.如今学习了Java,对于Java参数传递只能传值,不能传引用(指针)感到很困惑,在C#中不是常常说把某个引用传递到函数中 ...

  7. springmvc基础篇—拆分配置文件

    一般来讲,在企业实际项目中通常会将配置文件设置为两个:spring-mvc.xml.beans.xml,各自管各自的内容,方便管理. 一.在src下增加如下配置文件: <?xml version ...

  8. ios下 active 演示激活

    document.body.addEventListener('touchstart', function () { });

  9. Jmeter从文件中读取参数值

    1. 通过函数助手,从本地文件中取值选项->函数助手对话框->选择__CSVRead函数->调用参数其中,函数助手对话框中,第一栏填写本地文件所在地址,第二栏写需要入参的值,有点类似 ...

  10. 【读书笔记】2_增强学习中的Q-Learning

    本文为Thomas Simonini增强学习系列文章笔记或读后感,原文可以直接跳转到medium系列文章. 主要概念为: Q-Learning,探讨其概念以及用Numpy实现 我们可以将二维游戏想象成 ...