很常用的一款特效纯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. jquery移动端日期插件

    不说多的,直接看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. JQuery 动画及一些小知识点

    JQuery  动画 show(),hide()显示/隐藏slideDown(),slideUp() 拉开/合起fadeIn(),fadeOut()渐出/渐入自定义动画 animate({left:& ...

  3. java打包遇到问题java.io.IOException: invalid header field

    问题:java打包时报以下错误 $ jar -cvmf main.txt test.jar Shufile1.class java.io.IOException: invalid header fie ...

  4. handler 异步执行（进度条加载到100）

    生明一个handler 对象(可重写handlerMessage 方法) 声明一个Runnable 对象,需重写run方法 按钮事件:handler对象实例的post方法调用线程. 线程的run方法开 ...

  5. iOS 如何给Xcode7项目添加“.pch”文件

    1.首先打开你的项目(演示使用一个空的项目),按照以下步骤即可 找到“Supporting Files”文件夹,右键即可看到下图,选择“New File...” 2.选择"iOS" ...

  6. ZT 第一范式，第二范式，第三范式

    第一范式,第二范式,第三范式 Posted on 2012-05-09 16:30 GISerYang 阅读(6472) 评论(0) 编辑 收藏 第一范式 存在非主属性对码的部分依赖关系 R(A,B, ...

  7. andorid SQLite数据库的增删改查 和事务操作

    .xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  8. EF 6 for mysql

    1. NuGet安装 MySql.Data.MySql.Data.Entity 2.安装Entity Framework 6 Tools for Visual Studio 2012 & 20 ...

  9. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. hdu 1231

    最大连续子序列 Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit Statu ...