经常用到的图片插件演示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. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  2. OpenCascade Modeling Algorithms Fillets and Chamfers

    Modeling Algorithms Fillets and Chamfers 造型算法——倒圆与倒角 eryar@163.com 一.倒圆Fillet Constructor 1． BRepFil ...

  3. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  4. jQuery.queue源码分析

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...

  5. 总结消息队列RabbitMQ的基本用法

    一.RabbitMQ是什么? AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组 ...

  6. php对xml文件进行CURD操作

    XML是一种数据存储.交换.表达的标准: - 存储:优势在于半结构化,可以自定义schema,相比关系型二维表,不用遵循第一范式(可以有嵌套关系): - 交换:可以通过schema实现异构数据集成: ...

  7. [Server] 搭建发布环境Web Deploy

    在Web Deploy前,实际上完全可以使用FTP方式发布网站. 如果你购买的只是虚拟空间,那FTP方式更广泛. 先来搭建一套FTP吧 添加FTP服务 在网站上添加FTP发布 配置FTP服务 FTP注 ...

  8. CHARFORMAT2 structure

    CHARFORMAT2 structure 包含在丰富的编辑控件中的字符格式设置的信息.charformat2是微软丰富的编辑CHARFORMAT结构2扩展.微软丰富的编辑2允许您使用结构与em_ge ...

  9. 【转】Key/Value之王Memcached初探：一、掀起Memcached的盖头来

    一.Memcached是何方神圣? 在数据驱动的Web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的HttpRuntim ...

  10. ASP.NET发送电子邮件

    代码: using System; using System.Collections.Generic; using System.Configuration; using System.Linq; u ...