原文：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. spring关于@Autowired和@Qualifier的使用

    // package com.jhc.model; import org.springframework.stereotype.Component; @Component public interfa ...

  2. luogu2951 noip2017 小凯的疑惑

    在考场上我们可以打表发现规律是 $ ab-a-b $ .下面给出证明(看的网上的). 若有正数 $ x $ 不能被 $ a $ , $ b $ 组合出,假设 $ a>b $ ,则存在 \[ x= ...

  3. luogu2473 [SCOI2008]奖励关

    题解参照这里 每个研究完记得乘一个1/n,这是乘了概率. #include <iostream> #include <cstdio> using namespace std; ...

  4. 再谈H2的MVStore与MVMap

    对H2的[MVStore]: http://www.cnblogs.com/simoncook/p/5188105.html 这篇文章的补充. 概述 我们通常用的map,比如HashMap Linke ...

  5. RIP 路由协议

    RIP动态路由选择协议 routing information protocol     IGP   小范围   路由器限制为15台  超过可能无法收敛   收敛概念  在一个域内  各个路由器知道各 ...

  6. TOJ1840: Jack Straws 判断两线段相交+并查集

    1840: Jack Straws  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KByteTotal Submit: 1 ...

  7. 九度oj 题目1365：贝多芬第九交响曲

    现在在一块空的场地上会有一个大的二维棋盘,裁判会给你指定初始位置及一座贝多芬雕像所处的位置,你开始时就站在裁判指定的初始位置处,你的目标是跳到贝多芬雕像的位置.为了给比赛增加一定的难度,你在棋盘上行走 ...

  8. 设计模式（二 & 三）工厂模式：概述

    工厂 从 coding 的角度来说,在需要创建对象的时候,直接在方法内部使用 new 关键字来创建,是非常方便的. 然而从全局的角度考虑,这样会使对象变得难以管理和控制,代码会变得非常脆弱,缺乏弹性. ...

  9. Dango notes II: class-based views

    A view is a callable which takes a request and returns a response. A view can be function (function- ...

  10. HDU-3718 Similarity

    题目只有26个字母,所以我们新建一个二分图,v[i][j]表示字母i对应字母j时能成功匹配的个数,给这个边矩阵v求个最大匹配就是答案. #include <cstdlib> #includ ...