很常用的一款特效纯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. props

    // 这里是导入的包 import React, { Component } from 'react'; // 导入需要用到的组件 import { AppRegistry, Text, View } ...

  2. 天气api

    http://php.weather.sina.com.cn/xml.php?city=%D6%D8%C7%EC&password=DJOYnieT8234jlsK&day=0 cit ...

  3. textview 多行 省略号

    TextView自带的可以通过 android:ellipsize="end" android:singleLine="true"实现单行省略,  多行显示: ...

  4. Bias and Variance

    以下内容参考 cousera 吴恩达 机器学习课程 1. Bias 和 Variance 的定义 Bias and Variance 对于改进算法具有很大的帮助作用,在bias和Variance的指引 ...

  5. AEScrypto WEB and ANDROID (GITHUB)

    https://github.com/evgenyneu/aes-crypto-android https://github.com/evgenyneu/aes-crypto-web https:// ...

  6. nwe

    SELECT  SUBSTR('20150601', 1, 6) AS CALC_MONTH,       CHN.EMPLOYEE_CODE,       CHN.CHANNEL_TYPE,     ...

  7. swift 如何获取webView的内容高度

    应用中如果使用webView,要想获取其内容高度,就要实现其代理方法, 首先添加代理UIWebViewDelegate 然后给代理赋值 webView.delegate = self 实现代理方法: ...

  8. css颜色表示

    CSS1&CSS2的颜色方式 Color Name方式 用颜色关键字表示对应的颜色. 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而且特定颜色比较准确 缺点:英文记 ...

  9. iOS 不让自动锁屏

    [UIApplication sharedApplication].idleTimerDisabled=YES;

  10. mysql 统计

    每周: select count(*) as cnt,week(editdate) as weekflg from projects where year(editdate)=2007 group b ...