<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. javascript练习----复选框全选，全不选，反选

    第一种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 应用部署到JBOSS上遇到的问题

    原来应用在WAS7.0下,移植到JBOSS eap5.1.2下后,遇到了一些问题,特此记录: 1.数据源配置 在was中,datasource中获取数据源名称时,直接写was中配置的数据源名称即可.而 ...

  3. default(T)的含义

    default(T)是泛型中初始化的用法.因为对于泛型T你不知道是值类型还是引用类型,所以传参数是可能会出错.这里就要用到default(T). T t=default(T),就是初始化,值类型的话, ...

  4. z-score

    标准分数(standard score)也叫z分数(z-score),是一个分数与平均数的差再除以标准差的过程.用公式表示为: z=(x-μ)/σ.其中x为某一具体分数, μ为平均数,σ为标准差. Z ...

  5. (八)shell中的循环结构

    1.for循环(1)要求:能看懂.能改即可.不要求能够完全不参考写出来.因为毕竟嵌入式并不需要完全重新手写shell,系统管理员(服务器运维人员,应用层系统级管理开发的才需要完全掌握shell) 这里 ...

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

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

  7. easyui 进度条

    进度条创建 $.messager.progress({ title:'请稍后', msg:'正在努力...' }); 进度条关闭 $.messager.progress('close'); 弹窗对话框 ...

  8. Java Performance - 如何调查解决内存问题

    JVM 的内存溢出/不足/OutOfMemoryError/垃圾收集恶性循环是需要解决,又是屡见不鲜的问题. 建议阅读官方的 Troubleshooting Guide for Java SE 6 w ...

  9. 转载 uboot 命令

    1.bootm bootm [addr [arg ...]] - boot application image stored in memory passing arguments 'arg ...' ...

  10. python2 urllib 笔记

    python2 urllib 笔记 import urllib base='http://httpbin.org/' ip=base+'ip' r=urllib.urlopen(ip) print r ...