很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果

实例预览

下载地址

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="main">
                <ul class="tabs">
                    <li>
                        <input type="radio" checked name="tabs" id="tab1">
                        <label for="tab1">tab 1</label>
                        <div id="tab-content1" class="tab-content animated fadeIn">
                            <a href='#'>jQuery+jRange数值范围选择控件_鼠标拖动数值范围</a>
                            <p>本文用两个例子向大家介绍一款范围选择器插件jRange。</p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab2">
                        <label for="tab2">tab 2</label>
                        <div id="tab-content2" class="tab-content animated fadeIn">
                            <a href='#'>jquery下利用jsonp跨域访问实现方法</a>
                            <p>本文将给您介绍如何使用getJSON来实现异步跨域提交表单。</p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab3">
                        <label for="tab3">tab 3</label>
                        <div id="tab-content3" class="tab-content animated fadeIn">
                            <a href='#'>Flowplayer简单酷炫的视频播放器</a>
                            <p>Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。</p>
                        </div>
                    </li>
                </ul>
            </div>

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

在线演示

下载地址

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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种不同的切换图片列表动画效果以及tab动画演示 2的更多相关文章

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

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

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

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

  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  4. jQuery+fullPage.js演示10种全屏滚动

    基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...

  5. 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  6. TP框架配合jquery进行3种方式的多图片上传

    用的TP5.1框架+jquery 一 使用form表单方式进行多图片上传 html代码: <form action="../admin/admin/cs" enctype=& ...

  7. 使用 StoryBoard 实现左右按钮切换图片的浏览效果

    关键技能:使用故事板进行布局时,点击选中控件(组件)并按住 control 键向某个方向拖动,产生一条实线,然后弹出的窗口可以设置控件(组件)的布局约束条件:从而实现自动布局 AutoLayout 效 ...

  8. 微信小程序左右滑动切换图片酷炫效果

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...

  9. 微信小程序左右滑动切换图片酷炫效果（附效果）

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...

随机推荐

  1. 删除多余的provisioning profile

    当你的工程中有个人证书和企业证书时,你xCode打包的时候可能会发现一个问题:当你的Code Signing设置iOS Developer和Automatic,并且你的Bundle ID和Team选择 ...

  2. arm64 boot

    http://www.wowotech.net/linux_kenrel/arm64_initialize_1.html

  3. NetBios 的结构体详解（网络控制块NCB）

    对之前网络基础编程用到控制块NCB进行介绍(补充): 在Win32环境下,使用VC++6.0进行NetBIOS程序开发时, 需要用到nb30.h文件和netapi32.lib静态链接库.前者定义了Ne ...

  4. java的四种取整方法

    java 中取整操作提供了四种方法:分别是: public static double ceil(double a)//向上取整  public static double floor(double ...

  5. JDBC学习

    JDBC全称 Java DataBase Connectivity(java数据库连接)可以为多种数据库提供统一的访问: 步骤:1:加载驱动程序: 加载Mysql驱动:Class.forName(&q ...

  6. flash builder4.7bug

    flash builder4.7项目,swc中的button实例出来有bug,解决办法: 1,把button都改成movieclip. 2,改用swf做资源.

  7. 5.HotSpot的算法实现

    1.枚举根节点 在可达性分析中,可以作为GC Roots的节点有很多,但是现在很多应用仅仅方法区就有上百MB,如果逐个检查的话,效率就会变得不可接受. 而且,可达性分析必须在一个一致性的快照中进行-即 ...

  8. expdp报错ora 39126

    11.2.0.2,expdp报错: ORA-39126: Worker unexpected fatal error in KUPW$WORKER.GET_TABLE_DATA_OBJECTS []O ...

  9. Hibernate个人学习笔记(2)

    新增改查的操作 一.cfg.xml配置 <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE hibernate-configuration ...

  10. 验证码（网页的某些图片）在ie 360不显示，在火狐下显示正常

    解决办法: 开始->运行,在运行输入框中输入“regsvr32 c:\windows\system32\pngfilt.dll”(不包含双引号),然后点击确定,如果在出现“已加载c:\windo ...