很常用的一款特效纯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>
|
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
