原文：http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Jquery实现的图标抖动效果_网页代码站(www.webdm.cn)</title>

<script src="http://www.webdm.cn/themes/script/jquery.js"></script>

<script>

$(function(){

         function state1(){

             $(".rotate").removeClass("r2");

             $(".rotate").addClass("r1");

             setTimeout(state2,90);

         }

        function state2(){

             $(".rotate").removeClass("r1");

             $(".rotate").addClass("r2");

             setTimeout(state1,90);

        }

        state1();

})

</script>

<style>

body{

    background:url(wood-oak.jpg);

}

.tips{

    width:650px;

    margin:110px auto 0;

    font-family:Verdana, Geneva, sans-serif;

    color:#FFC;

    font-size:26px;

}

.dock{

    margin:90px auto 0;

    width:500px;

}

.board{

    float:left;

    margin-top:-60px;

    z-index:0;

}

.rotate{

    width:70px;

    height:70px;

    margin:20px 10px;

    z-index:1;

}

.r1{

     -moz-transform:rotate(-3deg);

    -webkit-transform:rotate(-3deg);

    -o-transform:rotate(-3deg);

}

.r2{

     -moz-transform:rotate(2deg);

    -webkit-transform:rotate(2deg);

    -o-transform:rotate(2deg);

}

</style>

</head>

<body>

<p class="tips">Tip: You may need to use the browser like chrome锛?firefox or safari  which supports CSS attribute to watch this rotate effect...</p>

<div class="dock">

      <img src="http://www.webdm.cn/images/20130701/FireFox.png" class="rotate" alt="icon"/>

      <img src="http://www.webdm.cn/images/20130701/IE.png" class="rotate" alt="icon"/>

</div>

<img  class="board" src="http://www.webdm.cn/images/20130701/woodboard1.png" />

<br />

<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>

</body>

</html>

Jquery实现的图标抖动效果的更多相关文章

  1. ios开发核心动画五：图标抖动效果--CAKeyframeAnimation

    #import "ViewController.h" #define angle2Rad(angle) ((angle) / 180.0 * M_PI) @interface Vi ...

  2. iOS图标抖动效果

    开始抖动 -(void)BeginWobble { srand([[NSDate date] timeIntervalSince1970]); float rand=(float)random(); ...

  3. jQuery实现抖动效果

    //抖动效果 //intShakes:抖动次数:intDistance:抖动左右距离:intDuration:持续时间 jQuery.fn.shake = function (intShakes, i ...

  4. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  7. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

随机推荐

  1. CodeForce：16C-Monitor

    传送门:http://codeforces.com/problemset/problem/16/C Monitor time limit per test0.5 second memory limit ...

  2. Linux操作系统启动流程

    一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下几步:1)开机BIOS自检,加载硬盘.2)读取MBR,进行MBR引导.3)grub引导菜单(Boot L ...

  3. windows基本DOS命令

    基本命令 dir : 列出当前目录下的文件以及文件夹,后面可以接其他路径 md : 创建目录(mkdir),一次创建多级目录,mkdir a\b\c rd : 删除目录,删除非空目录rd /s(删除最 ...

  4. 大数据学习——sparkSql对接hive

    1.   安装mysql 2.   上传.解压.重命名 2.1.  上传 在随便一台有hadoop环境的机器上上传安装文件 su - hadoop rz –y 2.2.  解压 解压缩:apache- ...

  5. python学习--Python之import与from...import的区别与用法

    Python编码第一步是导入模块,有时候用import ***有时候用from...import,它们有什么区别呢,请看实例A/B: A: 1.当模块test.py中没有类,只有方法add,此方法实现 ...

  6. 一张图展示：用两个栈来实现一个队列，完成队列的Push和Pop操作

    一  基本思路 将s1作为存储空间,以s2作为临时缓冲区. 入队时,将元素压入s1. 出队时,将s1的元素逐个“倒入”(弹出并压入)s2,将s2的顶元素弹出作为出队元素,之后再将s2剩下的元素逐个“倒 ...

  7. Leetcode 459.重复的子字符串

    重复的子字符串 给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且长度不超过10000. 示例 1: 输入: "abab" 输出: ...

  8. [git 学习篇] 关联github和本地创库

    所以,github和本地创库是通过ssh传送,所以要将公钥拷贝到远程创库上(比如我ssh 远程服务器时,先将本地的公钥,拷贝到远程服务器的某个文件上(http://www.cnblogs.com/li ...

  9. 解决MySQL版本之间造成的乱码、数据查询不出的问题

    在数据库连接字符串上加  charset=utf8 <connectionStrings> <add name="XJRDSModels" connectionS ...

  10. redis学习（一）redis简介

    REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统,是一种NoSql数据库.Redis是一个开源的使用ANS ...