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. linux c fprintf()

    #include<stdio.h> #include<unistd.h> #include<time.h> int main(int argc,char *argv ...

  2. ORB-SLAM 代码笔记（二）

    ORB-SLAM中除了第三方库,基本没有看到使用c++11的新特性(例如别的SLAM框架中常用的智能指针,拷贝控制,泛型算法等,基本没有使用动态内存,栈内存读取速度较快),因此非常适合初学,代码很清晰 ...

  3. 海思NB-IOT的SDK添加AT指令方法

    1. 首先打开app_at_cmd_parse.c文件,在文件的末尾找到,可在中间添加需要的代码 /查询电信自注册结果 {AT_FLAG_VISIABLE | AT_FLAG_LOGABLE, &qu ...

  4. 基于Mysql-Proxy实现Mysql的主从复制以及读写分离（上）

    基于Mysql-Proxy实现Mysql的主从复制以及读写分离(上) 上周BOSS给分配任务让实现一下Mysql数据库的主从复制以及读写分离,然后花了一盏茶的功夫进行了调研,发现主从复制数据库进行一番 ...

  5. Navicat oracle to postgresql ERR

    可能的解决思路是设好源数据和目标数据库后,先建立表结构,然后修改表结构字段数据类型 参考 https://www.cnblogs.com/stephen-liu74/archive/2012/04/3 ...

  6. selenium 的安装使用

    直接pip安装 pip install selenium 默认是火狐浏览器,需要安装下面网址的软件,解压后加入到环境变量中就可以了 https://github.com/mozilla/geckodr ...

  7. 标准H5文件头的写法

    整理代码如下: <!DOCTYPE html> <!-- 声明文档语言属性 --> <!-- 中文 --> <html lang="zh-Hans& ...

  8. python 基础篇 06 编码 以及小知识点补充

    本节主要内容: 1. is和==的区别2. 编码的问题 ⼀. is和==的区别1. id()通过id()我们可以查看到⼀个变量表⽰的值在内存中的地址 注  ----<<<在pytho ...

  9. 另外一种C#多选下拉框

    链接: https://pan.baidu.com/s/1tnLgC9P_V8y9qHTYSg8xGA 密码: cwxj

  10. 软工实践Beta冲刺(5/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...