经常用到的图片插件演示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. 快速入门系列--MySQL

    一直说要好好复习一下Mysql都木有时间,终于赶上最近新购买了阿里云,决定使用CentOS去试试.NET Core等相关的开发,于是决定好好的回顾下这部分知识,由于Mysql的数据库引擎是插件式的,对 ...

  2. javase基础复习攻略《九》

    本篇将为大家总结JAVA中的线程机制,谈到线程,大家一定会问线程和进程有什么区别?刚接触进程时我也有这样的疑问,今天就为大家简单介绍一下进程和线程.进程(Process)是计算机中的程序关于某数据集合 ...

  3. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...

  4. Unity3D 开发之shader教程(浅谈光照之漫反射diffuse)

    在游戏开发过程中,光照应该是必不可少部分,当然,这是指大多数的稍微大型一些的3D游戏会需要,给模型或者山山水水加上光照,会看上去更加的真实,获得更好的体验.一个本身不发光物体显示什么颜色,在于本身反射 ...

  5. Spark入门实战系列--7.Spark Streaming（下）--实时流计算Spark Streaming实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .实例演示 1.1 流数据模拟器 1.1.1 流数据说明 在实例演示中模拟实际情况,需要源源 ...

  6. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

  7. SQL Server代理(4/12)：配置数据库邮件

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在以前的文章里我们看到,SQL Serve ...

  8. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  9. SQL常用语句（2）

    //计算表tb_Blog的字段个数 select count(*) from syscolumns where id=object_id('tb_Blog') 获取指定表的所有字段和字段类型 SELE ...

  10. Java继承知识总结

    Java中的继承作为Java面向对象三大特性之一,在知识点上而言,还是很多的.现做出如下总结: 1. 继承的概念: 继承在本职上是特殊——一般的关系,即常说的is-a关系.子类继承父类,表明子类是一种 ...