让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 ...
随机推荐
- JS 实现点击展开菜单
1: 获取事件源的两种方式 2: overflow 控制展现 <%@ page language="java" import="java.util.*" ...
- 写XML配置文件时的一个乱码问题
首先我们用文本文档写一个xml文件如下: <?xml version="1.0" encoding="gb2312"?> <a> < ...
- HBase介绍及简易安装(转)
HBase介绍及简易安装(转) HBase简介 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问,是Google的BigTable的开源实现.HBase的目标是存 ...
- PHP基础知识之————PDO预处理语句
转载处:http://www.cnblogs.com/xiaohuochai/p/6133353.html 定义 在生成网页时,许多PHP脚本通常都会执行除参数之外,其他部分完全相同的查询语句,针对这 ...
- 10 database tables
本章提要-----------------------------------各种数据库表的讨论, 并介绍什么情况使用哪种表情调表的物理存储特征---------------------------- ...
- Linux设备模型(总线、设备、驱动程序和类)
Linux设备驱动程序学习(13) -Linux设备模型(总线.设备.驱动程序和类)[转] 文章的例子和实验使用<LDD3>所配的lddbus模块(稍作修改). 提示:在学习这部分内容是一 ...
- JavaWeb学习总结(二)—http协议
http协议概念: * 即超文本传输协议.它规定了浏览器与服务器之间的通讯规则. * http是基于请求/响应模式的,所以分为请求协议和响应协议 http的类型: HTTP协议的版本:HTTP/1.0 ...
- 【Todo】秒杀系统材料
秒杀系统:Link <一个经验证可落地的秒杀系统实践思路> 主要依赖于Redis进行处理. http://geek.csdn.net/news/detail/59847 淘宝大秒系统设 ...
- 【转载】高性能IO设计 & Java NIO & 同步/异步 阻塞/非阻塞 Reactor/Proactor
开始准备看Java NIO的,这篇文章:http://xly1981.iteye.com/blog/1735862 里面提到了这篇文章 http://xmuzyq.iteye.com/blog/783 ...
- hdu 1242 Rescue
题目链接:hdu 1242 这题也是迷宫类搜索,题意说的是 'a' 表示被拯救的人,'r' 表示搜救者(注意可能有多个),'.' 表示道路(耗费一单位时间通过),'#' 表示墙壁,'x' 代表警卫(耗 ...