<!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&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&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&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&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&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 > |
初级程序员
by: 云代码会员 发表于:2015-06-19 15:19:30 顶(0) | 踩(0) 回复
不错
回复评论