原文：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. java服务器备份（复制）

    public ResponseResult serverBackup (String[] datypeid)throws IOException{ ResponseResult rr = new Re ...

  2. CF 219 D：Choosing Capital for Treeland（树形dp）

    D. Choosing Capital for Treeland 链接:http://codeforces.com/problemset/problem/219/D   The country Tre ...

  3. RQNOJ:PID30 / [stupid]愚蠢的矿工☆（树形背包）

    PID30 / [stupid]愚蠢的矿工☆ 背景 Stupid 家族得知在HYC家的后花园里的中央花坛处,向北走3步,向西走3步,再向北走3步,向东走3步,再向北走6步,向东走3步,向南走12步,再 ...

  4. [转] 对 forEach()，map()，filter()，reduce()，find()，every()，some()的理解

    1.forEach() 用法:array.forEach(function(item,index){}) 没有返回值,只是单纯的遍历 2.map() 用法:array.map(function(ite ...

  5. Android 标题栏（2）

    本文来自网易云社区 作者:孙圣翔 添加ActionProvider 1.在menu菜单中添加app:actionProviderClass属性: <item     android:id=&qu ...

  6. python - 接口自动化测试实战 - case1 - 优化版

    题目: 基于以下两个接口和数据完成接口自动化测试,并生成测试报告: '''登录 login='http://47.107.168.87:8080/futureloan/mvc/api/member/l ...

  7. TensorFlow——热身运动：简单的线性回归

    过程: 先用numpy建立100个数据点,再用梯度下滑工具来拟合,得到完美的回归线. # _*_coding:utf-8_*_ import tensorflow as tf import numpy ...

  8. 紫书第三章训练1 E - DNA Consensus String

    DNA (Deoxyribonucleic Acid) is the molecule which contains the genetic instructions. It consists of ...

  9. Ruby 符号【转】

    Ruby的符号足以让很多初学者迷惑上一段时间,看过本章节后,或许会解开你心中的疑惑. 在Ruby中,一个符号是就是一个Symbol类的实例,它的语法是在通常的变量名前加一个冒号,如 :my_sy Ru ...

  10. SPOJ 3267 D-query（离散化+在线主席树 | 离线树状数组）

    DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...