用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

超酷jquery書架圖片展示特效

2014-11-19 作者: 云代码会员举报

[html]代码库

<!DOCTYPE HTML>
<head>

<title>jquery手架式图片展示效果Bookshelf Slider - jQuery Plugin</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/bookshelf_slider.css" />
<link rel="stylesheet" type="text/css" href="css/skin01.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<style type="text/css">
body { background:#54493e url(assets/bg_texture_11.png) repeat; margin-top:100px; } /* #54493e */
</style>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bookshelfslider.min.js"></script>

</head>

<body>

<script type="text/javascript">

jQuery(document).ready(function() {

	// default parameters
	//$.bookshelfSlider('#bookshelf_slider');
	
	//$.bookshelfSlider.config.item_width = 200;
	//$.bookshelfSlider('#bookshelf_slider');
	
	//define custom parameters
	
	$.bookshelfSlider('#bookshelf_slider', {
		'item_width': 845, //385
		'item_height': 320, //320
		'products_box_margin_left': 30,
		'product_title_textcolor': '#ffffff',
		'product_title_bgcolor': '#c33b4e',
		'product_margin': 30,
		'product_show_title': true,
		'show_title_in_popup': true,
		'show_selected_title': true,
		'show_icons': true,
		'buttons_margin': 15,
		'slide_duration': 1000,
		'slide_easing': 'easeOutQuart',
		'arrow_duration': 800,
		'arrow_easing': 'easeOutQuart',
		'video_width_height': [500,290],
		'iframe_width_height': [500,330]
		}
	);
	
	
});//ready

</script>

<div id="bookshelf_slider">

    <div class="panel_title">
        <div id="selected_title_box"><div id="selected_title">Selected Title</div></div>
        
        <div id="menu_top">
            <ul>
                <li id="show_hide_titles" class="menutop_btn"><a href="#">Titles</a></li>
                <li id="show_hide_icons" class="menutop_btn"><a href="#">Icons</a></li>
            </ul>
        </div>

    </div><!-- .panel_title -->
    
    <div class="panel_slider">
    	<div id="panel_items" class="panel_items">

            <div class="slide_animate">
            	<div class="products_box" id="products_box_1">
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/01_large.jpg" title="The Title is Optional 1"><img src="images/01.png" alt="" width="81" height="107" /></a>                 
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="images/02.jpg" alt="" width="71" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book Title"><img src="images/04.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Architecture & Design"><img src="images/06.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="content/iframe_content.html?size=450x330&amp;id_prod=123" title="Iframe HTML Content"><img src="images/05.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/book_large.png" title="Book Seo"><img src="images/07.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="content/iframe_content.html?size=750x250&amp;id_prod=123" title="Iframe HTML Content"><img src="images/05.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/book_large.png" title="Social Media"><img src="images/08.jpg" alt="" width="80" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Architecture & Design"><img src="images/06.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="images/02.jpg" alt="" width="71" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/01_large.jpg" title="The Title is Optional"><img src="images/01.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/01_large.jpg" title="The Title is Optional 1"><img src="images/01.png" alt="" width="81" height="107" /></a>                 
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="images/02.jpg" alt="" width="71" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book Title"><img src="images/04.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Architecture & Design"><img src="images/06.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="content/iframe_content.html?size=450x330&amp;id_prod=123" title="Iframe Content"><img src="images/05.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/01_large.jpg" title="The Title is Optional"><img src="images/01.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="content/iframe_content.html?size=450x330&amp;id_prod=123" title="Iframe Content"><img src="images/05.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="false" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="images/02.jpg" alt="" width="71" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Architecture & Design"><img src="images/06.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/book_large.png" title="Book Seo"><img src="images/07.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="images/03.png" alt="" width="81" height="107" /></a>            	</div>
            </div>
            
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_2">
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_health.png" alt="" width="76" height="108" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_gourmet.png" alt="" width="71" height="100" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_001.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_house.png" alt="" width="91" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_web.png" alt="" width="71" height="93" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_fitness.png" alt="" width="76" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_health.png" alt="" width="76" height="108" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_gourmet.png" alt="" width="71" height="100" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_001.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_house.png" alt="" width="91" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="info"><img src="images/magazine_web.png" alt="" width="71" height="93" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_3">
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD1"><img src="images/cd_01.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD2"><img src="images/cd_02.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD3"><img src="images/cd_03.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD1"><img src="images/cd_01.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD2"><img src="images/cd_02.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD3"><img src="images/cd_03.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD1"><img src="images/cd_01.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD2"><img src="images/cd_02.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD3"><img src="images/cd_03.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD1"><img src="images/cd_01.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD2"><img src="images/cd_02.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD3"><img src="images/cd_03.png" alt="" width="80" height="80" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_4">
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_5">
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$459"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="images/phone_03.png" alt="" width="43" height="84" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone_02.png" alt="" width="45" height="88" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$459"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="images/phone_03.png" alt="" width="43" height="84" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone_02.png" alt="" width="45" height="88" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$459"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="images/phone_03.png" alt="" width="43" height="84" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone_02.png" alt="" width="45" height="88" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$459"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="images/phone_03.png" alt="" width="43" height="84" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone_02.png" alt="" width="45" height="88" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_6">
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_02_large.png" title="Tablet 2"><img src="images/tablet_02.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_02_large.png" title="Tablet 2"><img src="images/tablet_02.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_02_large.png" title="Tablet 2"><img src="images/tablet_02.png" alt="" width="88" height="115" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_7">
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$459"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone_03.png" alt="" width="43" height="84" /></a>
					<a href="#" class="product" data-type="" data-popup="true" data-url="content/iframe_content.html?size=450x330&amp;id_prod=123" title="$343"><img src="images/phone_02.png" alt="" width="45" height="88" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book"><img src="images/04.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Book"><img src="images/06.jpg" alt="" width="100" height="107" /></a>
                    <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.jpg" title="Magazine"><img src="images/magazine_health.png" alt="" width="76" height="108" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD1 Info"><img src="images/dvd_01.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD2 Info"><img src="images/dvd_02.jpg" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="DVD3 Info"><img src="images/dvd_03.png" alt="" width="77" height="107" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD1"><img src="images/cd_01.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD2"><img src="images/cd_02.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_01_large.png" title="Tablet 1"><img src="images/tablet_01.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/tablet_02_large.png" title="Tablet 2"><img src="images/tablet_02.png" alt="" width="88" height="115" /></a>
                    <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="Info CD3"><img src="images/cd_03.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="Phone"><img src="images/phone_01.png" alt="" width="47" height="89" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/01_large.jpg" title="The Title is Optional"><img src="images/01.png" alt="" width="81" height="107" /></a>
                    <a href="#" class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Book Title"><img src="images/06.jpg" alt="" width="100" height="107" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_8">
                    <a href="#" class="product" data-type="" data-popup="true" data-url="content/105photoeffects.html?size=650x425" title="105 Photo Effects - BUNDLE"><img src="images/105-photo-effects-bundle-thumb.jpg" alt="" width="80" height="80" /></a>
 					<a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-book-mockup-01/1047833" title="$5"><img src="images/3d_book_mockup_01_thumb.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/50-photo-effects-curl-shadows/252183" title="$5"><img src="images/50-photo-effects-thumb.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/30-photo-effects/289703" title="$6"><img src="images/30-photo-effects-thumb.jpg" alt="" width="80" height="80" /></a>    
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-book-cover-007/118463" title="$5"><img src="images/book-007.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-book-cover-004/153488" title="$5"><img src="images/book004.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-box-006/117650" title="$4"><img src="images/3dbox.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/magazine-001/119576" title="$5"><img src="images/mag001.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/stamp-generator/122735" title="$5"><img src="images/stamp.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/chrome-light-shadow-reflection/130645" title="$6"><img src="images/textchrome.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-book-cover-003/124992" title="$6"><img src="images/3dbook003.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/bottle-white-wine/120372" title="$5"><img src="images/wine.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/magazine-003/140086" title="$5"><img src="images/magazine003.png" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/magazine-002/128997" title="$5"><img src="images/magazine002.jpg" alt="" width="80" height="80" /></a>
                    <a href="#" class="product" data-type="" data-popup="false" data-url="http://graphicriver.net/item/3d-book-cover-006/165663" title="$5"><img src="images/3d-book-006.jpg" alt="" width="80" height="80" /></a>            	</div>
            </div>
            
            <div class="slide_animate">
            	<div class="products_box" id="products_box_9">
                    <a href="#" class="product" style="margin-left:300px;" data-type="" data-popup="false" data-url="http://codecanyon.net/item/multipurpose-bookshelf-slider-jquery-plugin/1985655?ref=srvalle" title=""><img src="images/buy_bs_plugin.jpg" alt="" width="174" height="95" /></a>            	</div>
            </div>
        </div><!-- panel_items -->
    </div>
    <!-- panel_slider -->
    
    <div class="panel_bar">
    	<div id="arrow_box"><div id="arrow_menu"></div>
    	</div>
        <div class="button_items">
            <div id="btn1" class="button_bar"><a href="#">Books</a></div>
            <div id="btn2" class="button_bar"><a href="#">Magazines</a></div>
            <div id="btn3" class="button_bar"><a href="#">CDs</a></div>
            <div id="btn4" class="button_bar"><a href="#">DVDs</a></div>
            <div id="btn5" class="button_bar"><a href="#">Phones</a></div>
            <div id="btn6" class="button_bar"><a href="#">Tablets</a></div>
            <div id="btn7" class="button_bar"><a href="#">Mix Products</a></div>
            <div id="btn8" class="button_bar"><a href="#">Graphic River</a></div>
            <div id="btn9" class="button_bar"><a href="#">Buy Plugin</a></div>
        </div>
    </div>
    
    <!-- <div id="debug"></div> -->
    
</div><!-- bookshelf_slider -->


<!-- DEMO PANEL -->

<div id="bookshelf_options">

   
  
        <p align="center">来源:网络 代码整理:<a href="http://www.kaiwo123.com/" target="_blank">看我的特效网</a></p>
<p align="center">* 尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
 
<p align="center"><script type="text/javascript">/*760*90,创建于2011-12-8kaiwo*/ var cpro_id = 'u704891';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></p>
 

</div>




</body>
</html>

[源代码打包下载]




网友评论    (发表评论)

共2 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...