基于jQuery CSS3实现样本书特效



27 107 36



特效描述:基于jQuery CSS3实现 样本书特效,基于jQuery CSS3实现样本书特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.swatchbook.js"></script>

3. HTML代码

        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://51qianduan.com/">
                    <strong>&laquo; Previous Demo: </strong>3D Panel Layout
                </a>
                <span class="right">
					<a href="http://51qianduan.com/">Icon Font made with Fontello</a>
                    <a href="http://51qianduan.com/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<header>
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
				</nav>
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
			</header>
			<section class="main">
				<div id="sb-container" class="sb-container">
					<div>
						<span class="sb-icon icon-cog"></span>
						<h4><span>All Settings</span></h4>
					</div>
					<div>
						<span class="sb-icon icon-flight"></span>
						<h4><span>User Modes</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-eye"></span>
						<h4><span>Browse All</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-install"></span>
						<h4><span>Install App</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-bag"></span>
						<h4><span>Productivity</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-globe"></span>
						<h4><span>All Options</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-picture"></span>
						<h4><span>User Images</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-video"></span>
						<h4><span>User Videos</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-download"></span>
						<h4><span>Download App</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-mobile"></span>
						<h4><span>Mobile Theme</span></h4>											
					</div>
					<div>
						<span class="sb-icon icon-camera"></span>
						<h4><span>Digital App</span></h4>											
					</div>
					<div>
						<h4><span>Profile</span></h4>
						<h5><span>We &hearts; color</span></h5>											
					</div>
				</div><!-- sb-container -->
			</section>
        </div>
		<script type="text/javascript">
			$(function() {
				$( '#sb-container' ).swatchbook();
			});
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到