1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>JavaScript层抖动效果</title>
  5. <style type="text/css">
  6. #body{text-align:center;}
  7. #test{width:200px;position:absolute;margin:10px auto;height:100px;border:2px dotted red;text-align:center}
  8. </style>
  9. </head>
  10. <body>
  11. <div style="margin:10px 200px">
  12. <div>
  13. <input type="button" value="~点这里让我抖抖吧~" onclick="nn.start()" /></div>
  14. <div>
  15. <input type="button" value="晃晕了,我不抖了!" onclick="nn.stop()" /></div>
  16. <div id="test">
  17. <br>
  18. </div>
  19. </div>
  20. <p> </p>
  21. <p> </p>
  22. </body>
  23. </html>
  24. <script type="text/javascript">
  25. var m=document.getElementById("test");
  26. function SKclass (obj,Rate,speed) {
  27. var oL=obj.offsetLeft;
  28. var oT=obj.offsetTop;
  29. this.stop=null;
  30. this.oTime=null;
  31. var om=this;
  32. this.start=function(){
  33. if(parseInt(obj.style.left)==oL-2){
  34. obj.style.top=oT+2+"px";
  35. setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
  36. }
  37. else{
  38. obj.style.top=oT-2+"px";
  39. setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
  40. }
  41. this.oTime=setTimeout(function(){om.start()},speed);
  42. }
  43. this.stop=function(){
  44. clearTimeout(this.oTime);
  45.  
  46. }
  47. }
  48. var nn=new SKclass(m,20,70);
  49. </script>
  50. </body>
  51. </html>

让DIV实现抖动效果!的更多相关文章

  1. DIV的摇晃效果---jquery实现

    DIV的摇晃效果---jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. JS实现div的抖动:缓动式抖动

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. Jquery实现的图标抖动效果

    原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...

  4. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  5. iOS 为视图添加抖动效果

    抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...

  6. jQuery实现抖动效果

    //抖动效果 //intShakes:抖动次数:intDistance:抖动左右距离:intDuration:持续时间 jQuery.fn.shake = function (intShakes, i ...

  7. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  8. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  9. IOS中对于一些控件的抖动效果

    这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...

随机推荐

  1. JS 实现点击展开菜单

    1: 获取事件源的两种方式 2: overflow 控制展现 <%@ page language="java" import="java.util.*" ...

  2. 写XML配置文件时的一个乱码问题

    首先我们用文本文档写一个xml文件如下: <?xml version="1.0" encoding="gb2312"?> <a> < ...

  3. HBase介绍及简易安装(转)

    HBase介绍及简易安装(转) HBase简介 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问,是Google的BigTable的开源实现.HBase的目标是存 ...

  4. PHP基础知识之————PDO预处理语句

    转载处:http://www.cnblogs.com/xiaohuochai/p/6133353.html 定义 在生成网页时,许多PHP脚本通常都会执行除参数之外,其他部分完全相同的查询语句,针对这 ...

  5. 10 database tables

    本章提要-----------------------------------各种数据库表的讨论, 并介绍什么情况使用哪种表情调表的物理存储特征---------------------------- ...

  6. Linux设备模型(总线、设备、驱动程序和类)

    Linux设备驱动程序学习(13) -Linux设备模型(总线.设备.驱动程序和类)[转] 文章的例子和实验使用<LDD3>所配的lddbus模块(稍作修改). 提示:在学习这部分内容是一 ...

  7. JavaWeb学习总结(二)—http协议

    http协议概念: * 即超文本传输协议.它规定了浏览器与服务器之间的通讯规则. * http是基于请求/响应模式的,所以分为请求协议和响应协议 http的类型: HTTP协议的版本:HTTP/1.0 ...

  8. 【Todo】秒杀系统材料

    秒杀系统:Link <一个经验证可落地的秒杀系统实践思路> 主要依赖于Redis进行处理. http://geek.csdn.net/news/detail/59847   淘宝大秒系统设 ...

  9. 【转载】高性能IO设计 & Java NIO & 同步/异步 阻塞/非阻塞 Reactor/Proactor

    开始准备看Java NIO的,这篇文章:http://xly1981.iteye.com/blog/1735862 里面提到了这篇文章 http://xmuzyq.iteye.com/blog/783 ...

  10. hdu 1242 Rescue

    题目链接:hdu 1242 这题也是迷宫类搜索,题意说的是 'a' 表示被拯救的人,'r' 表示搜救者(注意可能有多个),'.' 表示道路(耗费一单位时间通过),'#' 表示墙壁,'x' 代表警卫(耗 ...