<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. 花神的数论题(数位dp）

    规定sum[i] 为i里面含1的个数 ,求从1-N sum[i]的乘积. 数为64位内的,也就是sum[i]<=64的,这样可以dp求出1-N中含k个1的数有多少个,快速幂一下就可以了. 有个地 ...

  2. SVM（支持向量机）与统计机器学习 & 也说一下KNN算法

    因为SVM和统计机器学习内容很多,所以从 http://www.cnblogs.com/charlesblc/p/6188562.html 这篇文章里面分出来,单独写. 为什么说SVM和统计学关系很大 ...

  3. 基础4 Android基础

    基础4 Android基础 1. Activity与Fragment的生命周期. Activity生命周期 打开应用 onCreate()->onStart()->onResume 按BA ...

  4. hdu 1142 用优先队列实现Dijkstra

    之前很认真地看了用优先队列来实现Dijkstra这块,借鉴了小白书上的代码模板后,便拿这道题来试试水了.这道题的大意就是问你从地点1到地点2有多少条满足条件的路径(假设该路径经过 1->...- ...

  5. [css] haslayout

    原文:http://blog.sina.com.cn/s/blog_51048da701018o29.html IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部 ...

  6. fedora 关闭、禁止selinux

    Fedora关闭/禁用SELinux三种方法 在Fedora中有时候我们想关闭SELinux,因为有时候本是合法的操作也总是弹出窗口阻止我们的操作.下面介绍三种方法来关闭/禁用SELinux. 1.在 ...

  7. hiho_1290_demo_day

    题目大意 一个MxN的矩阵,矩阵中的有些方格中有障碍物,有些没有,有一个机器人从左上角出发,它只能有两种移动方式:一直向右移动,直到遇到障碍物:一直向下移动,直到遇到障碍物.     现在可以将矩阵中 ...

  8. 部署git服务器 gitServer 软件

    部署git服务器 gitServer 软件 搭建git服务器也并不是非常的难,有这么多优秀的软件,选择一个适合自己就行了 1. windows版本 http://gitstack.com/ 免费版本, ...

  9. linux笔记：权限管理命令chmod,chown,chgrp,umask

    权限对文件和目录的含义是不同的:对文件来说:读:可以查看文件内容写:可以修改文件内容执行:可以执行文件对目录来说:读:可以列出目录中的内容写:可以在目录中创建.删除文件执行:可以进入目录 能够更改文件 ...

  10. 【CodeVS 1014】装箱问题

    题目描述 有一个箱子容量为V(正整数,0<＝V<＝20000),同时有n个物品(0<n<＝30),每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使箱子的剩 ...