<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. Scrum Meeting---Five(2015-10-29)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 Java Web工程创建,hibernate框架安装,关系映射文件生成 4h 用户注册登录 4h 胡 ...

  2. iOS - OC RunLoop 运行循环／消息循环

    1.RunLoop 1)运行循环: 运行循环在 iOS 开发中几乎不用,但是概念的理解却非常重要. 同一个方法中的代码一般都在同一个运行循环中执行,运行循环监听 UI 界面的修改事件,待本次运行循环结 ...

  3. Redis基础知识之————php-Redis 常用命令专题

    Keys del,delete - 删除键 dump - 返回存储在指定键值的序列化版本. exists - 确定键是否存在 expire,setTimeout,pexpire - 设置键的生存时间( ...

  4. CXF WebService 开发文档

    参考资料: 1. http://cxf.apache.org/docs/ 2. http://www.cnblogs.com/hoojo/archive/2011/03/30/1999587.html ...

  5. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  6. Python学习（14）模块一

    目录 Python 模块 import语句 from ... import 语句 from ... import * 语句 定位模块 PYTHONPATH变量 命名空间和变量 dir()函数. glo ...

  7. python把元组组合成字典

    list=((","16g"), (","32g"), (","red"), (","bl ...

  8. iOS开发之Xcode 6 国际化

    Xcode6 国际化 (1) 新建一个Single View app模版项目,命名为LocalizationTest 1.建立strings文件,命名为Localization.strings 2.点 ...

  9. 如何在Mac OSX上安装xgboost

    听说xgboost效果很不错,于是准备学习下,但是发现大多数资料都是在讲如何在windows或linux下安装xgboost,而且照着官方文档也没有正确的安装好多线程的xgboost.最后还是从the ...

  10. mybatis generator

    http://blog.csdn.net/sunny243788557/article/details/45166397 http://www.cnblogs.com/smileberry/p/414 ...