经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果

在线演示

下载地址

实例代码

<!DOCTYPE html>

<html lang="en" class="no-js">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <title>jQuery十种不同的切换图片列表动画效果</title>

        <meta name="description" content="Animations for Thumbnail Grids: Transition Inspiration for Thumbnail Grids" />

        <meta name="keywords" content="animation, thumbnail, grid, css, inspiration, transition, effect, web design" />

        <link rel="stylesheet" type="text/css" href="css/demo.css" />

        <link rel="stylesheet" type="text/css" href="css/component.css" />

        <script src="js/modernizr.custom.js"></script>

    </head>

    <body>

        <div class="container">

            <!-- Top Navigation -->

            <header>

                <h1>Animations for Thumbnail Grids</h1>

                <nav class="sucaihuo-demos">

                    <a class="current-demo" href="index.html">Fall</a>

                    <a href="index2.html">Slide</a>

                    <a href="index3.html">Rotate Fall</a>

                    <a href="index4.html">Rotate Scale</a>

                    <a href="index5.html">Stack</a>

                    <a href="index6.html">3d Flip</a>

                    <a href="index7.html">Bring back</a>

                    <a href="index8.html">Superscale</a>

                    <a href="index9.html">Center Flip</a>

                    <a href="index10.html">Front Row</a>

                </nav>

            </header>

            <section class="tt-grid-wrapper">

                <ul class="tt-grid tt-effect-fall tt-effect-delay">

                    <li><a href="#"><img src="img/1.jpg" alt="img1"/></a></li>

                    <li><a href="#"><img src="img/2.jpg" alt="img2"/></a></li>

                    <li><a href="#"><img src="img/3.jpg" alt="img3"/></a></li>

                    <li><a href="#"><img src="img/4.jpg" alt="img4"/></a></li>

                    <li><a href="#"><img src="img/5.jpg" alt="img5"/></a></li>

                    <li><a href="#"><img src="img/6.jpg" alt="img6"/></a></li>

                </ul>

                <nav>

                    <a class="tt-current"></a><a></a><a></a><a></a>

                </nav>

            </section>

        </div><!-- /container -->

        <script src="js/classie.js"></script>

        <script src="js/thumbnailGridEffects.js"></script>

        <script type="text/javascript" src="/static/js/home.js"></script>

    </body>

</html>

　　

jQuery演示10种不同的切换图片列表动画效果的更多相关文章

  1. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. 使用animate()完成修改图片src切换图片的动画效果

    如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow" ...

  3. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  4. js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  5. 【iOS开发】关于显示一连串图片组成动画效果UIImageView的使用

    关于使用UIImageView显示一串图片组成动画效果的总结: 1>创建装这一串图片的容器,使用NSArray NSMutableArray *images = [NSMutableArray ...

  6. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  7. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  8. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  9. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

随机推荐

  1. file:///Users/xmg/Desktop/xiangmu~Bsbdejie/BaisibudejieTheSecondtime/BaisibudejieTheSecond/BaisibudejieTheSecond/AppDelegate.m: warning: Missing file: /Users/xmg/Desktop/xiangmu~Bsbdejie/BaisibudejieT

    warning: Missing file: is missing from working copy fatal error: file '-.h' has been modified since ...

  2. WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...

  3. QQ左侧滑动显示

    对于新版的QQ界面,左侧增加了一个滑动效果,相信小伙伴们早已按耐不住激动的心情,这种效果是如何实现的呢?本篇我们就一起来探讨一二.既然是滑动效果这里就要使用到HorizontalScrollView类 ...

  4. Netty中的坑(下篇)

    其实这篇应该叫Netty实践,但是为了与前一篇名字保持一致,所以还是用一下坑这个名字吧. Netty是高性能Java NIO网络框架,在很多开源系统里都有她的身影,而在绝大多数互联网公司所实施的服务化 ...

  5. 开发人员看测试之运行Github中的JBehave项目

    本文要阐述的主要有两点,一是介绍自动化测试框架JBehave,二是介绍如何在Github上拉项目,编译成myeclipse环境中的项目,并最终导入Myeclipse中运行. JBehave是何物? J ...

  6. Azure Automation (1) 入门

    <Windows Azure Platform 系列文章目录> 通过Azure Automation(自动化),开发人员可以自动完成通常要在云环境中执行的手动.长时间进行.易出错且重复性高 ...

  7. [Java 基础]接口

    抽象类和抽象方法 抽象方法 在面向对象编程语言中抽象方法指一些只有方法声明而没有具体方法体的方法抽象方法一般存在于抽象类或接口中. java中,抽象方法就是以 abstract 修饰的方法,只需要声明 ...

  8. iOS平台快速发布HT for Web拓扑图应用

    iOS平台一直是封闭的生态圈,iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试,所开发的APP需要上传到App Store经过苹果审核以后才可对外发布.如果要开发企业内部应用,则 ...

  9. ASP.NET MVC网站在opera mobile emulator中浏览

         众所周知,ASP.NET MVC4有一个Moblie Application,我们都可以通过这个来开发手机网站,当然为了简单,也可以在一般的MVC中的View下面加个后缀mobile,形如I ...

  10. MVC4在IIS6上部署遇到的问题

    最近的一个项目结束了,花的时间一个月左右吧..... 开发环境 win7+VS2012+MVC4(.net 4.0)+SQL SERVER 2008 部署环境 windows server 2003 ...