经常用到的图片插件演示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. js实现打开本地文件或文件夹

    原网址:http://blog.csdn.net/cofesun/article/details/7904887javascript有个特殊的对象ActiveXObject,通过它可以访问window ...

  2. PHP类和对象函数实例详解

    1. interface_exists.class_exists.method_exists和property_exists: 顾名思义,从以上几个函数的命名便可以猜出几分他们的功能.我想这也是我随着 ...

  3. mysql判断一条记录是否存在，如果存在，则更新此语句，如果不存在，则插入

    前言,在我们的业务逻辑中,很有可能会遇到这样的情况. 1.我要更新一条记录的值. 2.但是我不确定这条记录存不存在??? 3.那如果存在?我就更新,如果不存在,我就插入! 那么如果这样,一般情况下,我 ...

  4. Zip文件中文乱码问题解决方法(MAC->Windows)

    前言: 最近收到的ZIP交互原型,打开查看中文一堆乱码.主要是产品都是高大上啊,用的都是MAC,咱酷毙用的Windows,话说安卓APP,你用MAC搞啥啊.可恨的压缩用的是zip,不是rar之类的.为 ...

  5. JAVA 设计模式 组合模式

    用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模式. 结构

  6. JS和jQuery中的事件总结（一）

    学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...

  7. elasticsearch中的API

    elasticsearch中的API es中的API按照大类分为下面几种: 文档API: 提供对文档的增删改查操作 搜索API: 提供对文档进行某个字段的查询 索引API: 提供对索引进行操作 查看A ...

  8. 关于IHttpModule的相关知识总结

    一.IHttpModule相关概述 using System; namespace System.Web { public interface IHttpModule { // 销毁不再被HttpMo ...

  9. 30天C#基础巩固----查找XML文件元素

    一:XML文档 了解xml文档. 利用代码来创建XML文档. //引用命名空间+using System.Xml; XmlDocument xdoc=new XmlDocument(); XmlDec ...

  10. NetworkError: 404 Not Found - http://www.companyName.com/Content/fonts/ubuntu-regular-webfont.woff2

    网站是使用BootStrap框架实现,当站点发布至服务器(Windows Server 2008 R2)IIS之后,显示下面的异常: Insus.NET跑至相关目录之下检查,这些字体的文件是确实存在的 ...