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. Git的升级版本

    关于升级版本,例如我们要升级service版本,我们可以这样子操作 1.在master里面pull完了之后,到自己的分支,然后merge master里面的代码,然后把pom文件 里面的版本升一级,然 ...

  2. 【连载】Bootstrap开发漂亮的前端界面之插件开发

    相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...

  3. Unity5.6偶尔不能创建项目解决办法

    Unity5.6偶尔启动后,不能创建项目,解决办法如下: 1.打开Unity 2.在开始窗口退出当前登录的账户 3.重新登录 4.然后就可以创建新项目了 5.如果以上方法不生效,关闭Unity再重试一 ...

  4. html5特效库

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. delaunay.js是一款能在图片中形成无数个三角形 ...

  5. PowerDesigner 使用记录

    使用PowerDesigner 16.5 设计数据库表结构的操作过程: 第一步:打开PowerDesigner工具 第二步:创建一个新的数据模型,选择 File -> New Model -&g ...

  6. Selenium PageFactory页面工厂

    使用Selenium PageFactory页面工厂的好处是: 当页面元素的位置发生变化时, 我们只需要去修改id或者xpath, 而不用去修改测试用例. import org.openqa.sele ...

  7. ECharts 上传图片Example

    前端 1.为ECharts准备一个div <div id="main" style="Height:400px"></div> 2.引入 ...

  8. visionpro halcon 哪个好

    visionpro halcon 哪个好 很多朋友会问到visionpro和halcon这两款机器视觉软件,到底学哪个好呢,今天众寻网就给大家讲一讲: 首先比较下两者的优缺点: halcon: 提供的 ...

  9. 详解python 局部变量与全局变量

    本文将详细分析python的全局变量与局部变量,学过php的人都知道,php里面的全局变量是无法在function里面去使用的,只有超全局变量才可以,那么python会怎么处理全局变量与局部变量呢?下 ...

  10. io学习-相关文章

    文章:IO编程 地址:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143 ...