经常用到的图片插件演示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. 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧. 目录 简介 成批处理DHTML更改 使用innerText 使用DOM添加单个元素 扩展SELE ...

  2. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  3. c++中关于初始化型参列表的一些问题

    /* 1.成员是按照他们在类中出现的顺序进行初始化的,而不是按照他们在初始化列表出现的顺序初始化的! 一个好的习惯是,按照成员定义的顺序进行初始化. 2.数组成员在初始化型参列表中不正确 */ #in ...

  4. JavaScript作用域原理（三）——作用域根据函数划分

    一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...

  5. [转载]AxureRP常用快捷键

    习惯用Axure快捷键会让你做原型的时候更得心应手.Axure中文网总结了常用的一些快捷键分享给大家 . Axure RP Pro 6.5快捷键大全,如有疏漏,欢迎补充.   基本快捷键:   打开: ...

  6. 机器学习&数据挖掘笔记_20（PGM练习四：图模型的精确推理）

    前言: 这次实验完成的是图模型的精确推理.exact inference分为2种,求边缘概率和求MAP,分别对应sum-product和max-sum算法.这次实验涉及到的知识点很多,不仅需要熟悉图模 ...

  7. 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...

  8. tomcat6类加载器与类加载顺序

    tomcat6.0.32 com.dyyx.ShareUtils//返回系统当前时间public static String now(); package com.dyyx;import java.t ...

  9. C# Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面

    个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...

  10. 一个ajax同步与异步引发的血案。

    前言 公司做网上促销活动,需要充值换取相应的抽奖资格,抽奖可以获得丰厚的礼品,而且抽奖资格门槛有点高,领导下达命令保证活动的正常上线与运行,领导很重视,就这样,在领导的安排下进行了相关活动的codin ...