让DIV实现抖动效果！

时间：2022-02-16 09:16:15
<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. 浅谈Android样式开发之View Animation &lpar;视图动画&rpar;

    引言 一个用户体验良好的App肯定少不了动画效果.Android为我们提供了2种动画框架,分别是视图动画(View Animation)和属性动画(Property Animation).视图动画比较 ...

  2. 作业七：团队项目——Alpha版本冲刺阶段006

    今日进展:完成主体代码. 今日安排:对程序主体进行编写.

  3. 相关性分析 -pearson spearman kendall相关系数

    先说独立与相关的关系:对于两个随机变量,独立一定不相关,不相关不一定独立.有这么一种直观的解释(不一定非常准确):独立代表两个随机变量之间没有任何关系,而相关仅仅是指二者之间没有线性关系,所以不难推出 ...

  4. &lbrack;MarsZ&rsqb;程序猿谈大学之大学应该学好哪些课程

    大家好,我是MarsZ,上次给大家带来了程序猿Mars谈大学之大学应该怎么过 ,反响还不错(……),这次继续给大家分析一下大学应该学好哪些课程. 首先必须说明两点:一,以下我说的仅代表个人观点.二,仅 ...

  5. 《JS权威指南学习总结--第六章 对象》

    内容要点: 一.对象定义 对象是JS的基本数据类型.对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值. 对象也可看做是属性的无序集合,每个属性都是一个名/值对. 属性 ...

  6. C&num;备份一个文件到指定的文件夹里面

    一开始我的想法是这样的: //在控制台里面操作 static void Main(string[] args) { //backup( @"D:\gg\config.xml", @ ...

  7. django&period;db&period;utils&period;ProgrammingError&colon; &lpar;1146&comma; &quot&semi;Table &&num;39&semi;db&lowbar;gold&period;user&lowbar;ip&lowbar;info&&num;39&semi; doesn&&num;39&semi;t exist&quot&semi;&rpar; RuntimeError&colon; Model class scanhosts&period;models&period;HostLoginInfo doesn&&num;39&semi;t declare an explicit app&lowbar;label and isn&&num;39&semi;t in an a

    Error Msg 创建了一个apps的目录将所有app放入apps文件中, 将apps路径加入sys.path中:sys.insert(0, os.path.join(BASE_DIR, &quot ...

  8. Golang 入门系列（四）如何理解interface接口

    前面讲了很多Go 语言的基础知识,包括go环境的安装,go语言的语法等,感兴趣的朋友,可以先看看之前的文章.https://www.cnblogs.com/zhangweizhong/category ...

  9. 省市区三级联动picker-view-微信小程序

    这个是微信小程序的picker-view组件,开发的省市区3级联动,体验还不错,就分享给大家了, 此版本的省市区数据为本地JS数据,免去请求加载数据了,大家直接看源码,先看下面的动图:   项目地址: ...

  10. C&plus;&plus; error&colon; passing &&num;39&semi;const std&colon;&colon;map&lt&semi;&gt&semi;&rsqb;&&num;39&semi; discards qualifiers或pass-by-reference-to-const-map导致的&OpenCurlyDoubleQuote;discards qualifiers”

    产生问题的场景: int func(const map<int, string> &aMap) { string value = amap[0]; } 或者 int  Test:: ...

相关文章