让DIV实现抖动效果!
<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实现抖动效果!的更多相关文章
- DIV的摇晃效果---jquery实现
DIV的摇晃效果---jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- JS实现div的抖动:缓动式抖动
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- Jquery实现的图标抖动效果
原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- iOS 为视图添加抖动效果
抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...
- jQuery实现抖动效果
//抖动效果 //intShakes:抖动次数:intDistance:抖动左右距离:intDuration:持续时间 jQuery.fn.shake = function (intShakes, i ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- jQuery实现的Div窗口震动效果实例
本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...
- IOS中对于一些控件的抖动效果
这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...
随机推荐
- ZOJ-2562 More Divisors 反素数
题意:给定一个数N,求小于等于N的所有数当中,约数最多的一个数,如果存在多个这样的数,输出其中最大的一个. 分析:反素数定义:对于任何正整数x,其约数的个数记做g(x).例如g(1)=1,g(6)=4 ...
- iOS - OC 基本语法
1.常见文件扩展名 .c C 语言源文件 .cc..cpp C++ 语言源文件 .m Objective-C 源文件 .mm Objective-C++ 源文件 .h 头文件 .pl Perl 源文件 ...
- Tuning 简介
典型的不好的设计: 破坏了系统的可扩展性(韧性) Applications requiring significant concurrency management as user populatio ...
- Python学习(22)python网络编程
Python 网络编程 Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的 ...
- 线程高级应用-心得8-java5线程并发库中同步集合Collections工具类的应用及案例分析
1. HashSet与HashMap的联系与区别? 区别:前者是单列后者是双列,就是hashmap有键有值,hashset只有键: 联系:HashSet的底层就是HashMap,可以参考HashSe ...
- 4 BOM编程
4 BOM编程 编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的 ...
- iOS开发之Xcode6 之手动添加Pch预编译文件
参考文档 http://blog.csdn.net/crazyzhang1990/article/details/44243343 红色部分为本人自己补充注意事项 在Xcode6之前,创建一个新工程x ...
- Linux大文件分割split和合并cat使用方法
本文主要介绍linux下两个命令:split和cat.其中,相信大家都熟悉cat命令,一般用来查看一个文件的内容,但是它还其它的功能,比如这里要介绍的文件合并功能,它可把多个文件内容合并到一个文件中. ...
- sap 中怎样把非限制库存转为销售订单库存?
把非限制库存转为销售订单库存: MB1B 移动类型413 把销售订单库存转为非限制库存: MB1B移动类型411 E 切记!
- controller 监控Unix性能信息
linux系统需要有RPC(Remote Procedure Call Protocol),远程过程调用协议,通过安装rpc.rstatd程序,启动其服务,就可以给远程机器提供信息,即Lr可以获取到该 ...