<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript层抖动效果</title>

<style type="text/css">

#body{text-align:center;}

#test{width:200px;position:absolute;margin:10px auto;height:100px;border:2px dotted red;text-align:center}

</style>

</head>

<body>

<div style="margin:10px 200px">

    <div>

        <input type="button" value="~点这里让我抖抖吧~" onclick="nn.start()" /></div>

    <div>

        <input type="button" value="晃晕了，我不抖了！" onclick="nn.stop()" /></div>

    <div id="test">

        <br>

        </div>

</div>

<p>　</p>

<p>　</p>

</body>

</html>

<script type="text/javascript">

 var m=document.getElementById("test");

function SKclass (obj,Rate,speed) {

     var oL=obj.offsetLeft;

     var oT=obj.offsetTop;

     this.stop=null;

     this.oTime=null;

     var om=this;

     this.start=function(){

             if(parseInt(obj.style.left)==oL-2){

                obj.style.top=oT+2+"px";

                setTimeout(function(){obj.style.left=oL+2+"px"},Rate)

             }

             else{

                obj.style.top=oT-2+"px";

                setTimeout(function(){obj.style.left=oL-2+"px"},Rate)

            }

        this.oTime=setTimeout(function(){om.start()},speed);

     }

     this.stop=function(){

       clearTimeout(this.oTime);

     }

}

var nn=new SKclass(m,20,70);

</script>

</body>

</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. netty概念

    Netty的ChannelFuture在Netty中的所有的I/O操作都是异步执行的,这就意味着任何一个I/O操作会立刻返回,不保证在调用结束的时候操作会执行完成.因此,会返回一个ChannelFut ...

  2. spring常用的工具类

    spring给我们提供了很多的工具类, 应该在我们的日常工作中很好的利用起来. 它可以大大的减轻我们的平时编写代码的长度. 因我们只想用spring的工具类, 而不想把一个大大的spring工程给引入 ...

  3. Joke

    你忍心蜗居在不到10平米的小屋里吗?你忍心看着自己的女友和你奋斗一辈子还供不起一套房吗?你忍心看着你父母缩衣节食把仅有的一点养老金帮你还房贷吗? 这里才是实现你梦想的地方.加入我们,待遇从优,装备齐全 ...

  4. [转载] Tmux 速成教程：技巧和调整

    原文: http://blog.jobbole.com/87584/ 决定从 screen 转向 tmux 了, 非常喜欢 tmux 的窗格功能. 简介 有些开发者经常要使用终端控制台工作,导致最终打 ...

  5. 适应各浏览器图片裁剪无刷新上传jQuery插件（转）

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  6. 算法_队列的Java通用数组实现

    在实现Queue的API的时候,可以使用两个实例变量做索引,一个变量head指向队列的开头,另一个变量tail指向队列的结尾.在删除一个元素的时候,使用head访问,并将head+1,插入一个元素的时 ...

  7. [css] 【转载】 精简高效的CSS命名准则/方法

    原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...

  8. OpenGL的glViewport视口变换函数详解[转]

    调用glViewPort函数来决定视见区域,告诉OpenGL应把渲染之后的图形绘制在窗体的哪个部位.当视见区域是整个窗体时,OpenGL将把渲染结果绘制到整个窗口. void glViewPort(G ...

  9. [转载]WEB缓存技术概述

    [原文地址]http://www.hbjjrb.com/Jishu/ASP/201110/319372.html 引言 WWW是互联网上最受欢迎的应用之一,其快速增长造成网络拥塞和服务器超载,导致客户 ...

  10. easyui dialog

    <!--弹出“创建”窗口 --> <div id="dialog" class="easyui-dialog" title="创建机 ...