jQuery ui制作电子杂志书演示，兼容性可靠。

jquery ui插件制作图片幻灯片电子相册，jQuery带有翻页效果的图片电子杂志书。支持收藏，翻页功能的电子相册。比较实用的电子杂志书，兼容各大主流浏览器IE6或以上等。

 

查看演示>>

 

<link type="text/css" href="http://www.jsfoot.com/jquery/demo/2012-06-30/css/book.css" rel="stylesheet" />



<div id="book" style="margin:0 auto;">



	<div class="arrow" style="left: -27px;">

		<div class="mask"></div>

		<div class="al" title="上一页"></div>

	</div>



	<div id="flip">

		<div class="container">

			<div class="label"></div>

			<div class="content"></div>

			<div class="pager"></div>

		</div>

		<div class="overlayer ie_l"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/flip_r.png" width="100%" height="627" /></div>

	</div>

	

	<div id="left">

		<div class="label"><a id="btn_fav" href="http://www.jsfoot.com/" title="每个人身边都有一个桃姐" tag="活法"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/favourite.jpg" />收藏</a><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/vertical.jpg"/><a id="btn_down" href="http://cn.yimg.com/2012323huofapdf/huofa.pdf" target="_blank"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/download.jpg" />下载</a></div>

		<div class="content">

			<div class="default"><img alt="" src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/2012032317.jpg" height="441" width="277"><p align="center"></p></div>

		</div>

		<div class="pager"></div>

	</div>

	

	<div id="right">

	

		<div class="label">每个人身边都有一个桃姐<span>2012.3.23 第六十八期</span></div>

	

		<div class="content">

			<div class="default"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/taojiefm2.jpg" style="cursor:pointer;" onclick="$('#book .arrow .ar').click();"/></div>

		</div>

		<div class="glide">

			<div style="left: 50%;"></div>

		</div>

	

	</div>

	

	<div id="foot"></div>



	<div class="arrow" style="left:965px;">

		<div class="mask"></div>

		<div class="ar" title="下一页"></div>

	</div>

	

</div>



<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/jqueryui-1.8.min.js"></script>

<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/book.js"></script>

<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/page.js"></script>