很常用的一款特效纯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. 循序渐进Python3（七） -- 2-- 面向对象进阶

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  2. ViewPager图片轮转带点的

    布局页面设置: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:and ...

  3. VMware下 Ubuntu 看不到共享文件夹之解决办法

    VMware下 Ubuntu 看不到共享文件夹之解决办法 初学Linux,在VMWare 上装了Ubuntu10.04,主机端和虚拟机相互间的访问是必不可少的,途径有许多,其中vmware tool提 ...

  4. 案例：TableLayout表格布局——迷你计算器

    计算器可以常用线性布局(LinearLayout)和表格布局(tableLayout).Gridlayout 今天我用的是表格布局 效果如下: 代码如下: <TableLayout xmlns: ...

  5. 技术英文单词贴--G

    G generator 发电机,发生器,生产者

  6. CSS3--响应式布局

    一.流式布局 不再使用px作为盒模型布局,而是采用百分比布局宽高,定位等. 公式:目标元素宽度/上下文元素宽度=百分比宽度 目标定位/上下文元素宽度或高度=定位距离(保留5位小数点) 用em/rem来 ...

  7. tabbar底部标题和子控制器标题为什么会保持一致？

    原因: 1.当self.navigationItem.title,self.tabBarItem.title没有赋值情况下值和self.title一致. 2.当切换到该控制器页面的时候自己设置的sel ...

  8. CentOS7搭建NAS，包括NFS、ISCSI

    第一步:安装 更新系统 yum update 安装iftop yum install epel-release yum install iftop 安装NFS yum install nfs-util ...

  9. 阿里云配置nginx+php+mysql

    #yum -y install php mysql mysql-server mysql-devel php-mysql php-cgi php-mbstring php-gd php-fastcgi ...

  10. ARP协议

    ARP协议就是一个获取对方MAC地址的协议,ARP协议它是一个网络层的协议,它的作用是通过ARP request报文来获得对方的MAC地址,ARP报文里面发送的内容大概是192.168.1.20你的M ...