原文：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. POJ - 3660 Cow Contest（传递闭包）

    题意: n个点,m条边. 若A 到 B的边存在,则证明 A 的排名一定在 B 前. 最后求所有点中,排名可以确定的点的个数. n <= 100, m <= 4500 刚开始还在想是不是拓扑 ...

  2. 官网下载MySQL

    1)首先我们访问MySQL官网https://dev.mysql.com/,然后如下 2)我们向下拉取滚动条,来到如下界面,选择Source Code 3)向下拉取滚动条,来到如下界面,操作如下: 4 ...

  3. Linux学习-逻辑滚动条管理员 (Logical Volume Manager)

    LVM 可以整合多个实体 partition 在一起, 让这些 partitions 看起来就像是一个磁盘一样!而且,还可以在未来新增或移除其他的实 体 partition 到这个 LVM 管理的磁盘 ...

  4. HDU 1827 强连通 缩点 Summer Holiday

    求出强连通分量,因为强连通中只要有一个人被通知到了,所有人都能被通知到. 缩点以后形成一个DAG,找出那些入度为0的点,累加上它们的权值就是答案.一个点的权值等于SCC中权值最小的那个点. #incl ...

  5. tomcat6-servlet规范对接 与 ClassLoader隔离

    之前写的一个ppt 搬到博客来

  6. python - 接口自动化测试 - ReadExcel - 读取测试数据封装

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: read_excel.py @ide: PyCharm C ...

  7. Set容器——TreeSet及常用API

    TreeSet及常用Api ①   TreeSet为使用树来进行存储的Set接口提供了一个工具,对象按升序存储,访问和检索很快; ②   在存储了大量的需要进行快速检索的排序信息的情况下,TreeSe ...

  8. 九度oj 题目1494：Dota

    题目描述: 大家都知道在dota游戏中,装备是对于英雄来说十分重要的要素. 英雄们不仅可以购买单个的装备,甚至某些特定的装备组合能够合成更强的装备. 为了简化问题,我们将每个装备对于英雄的功能抽象为一 ...

  9. JDBC 学习笔记（八）—— ResultSet

    JDBC 使用 ResultSet 来封装 SQL 的查询结果,可以将 ResultSet 类比为数据库表的查询结果. 它拥有如下两个性质: 可滚动. 可更新. 这两个性质,是在创建 Statemen ...

  10. linux下编译静态库openssl

    先编译zlib cmake . -DCMAKE_INSTALL_PREFIX=/depends make make install 然后编译openssl ./config zlib no-rc5 n ...