jquery襯衣產品內容詳情頁


html代碼:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>我的Jane shopping</title>
  6 <link rel="stylesheet" href="styles/main.css" type="text/css" />//樣式
  7 <link rel="stylesheet" href="styles/detail.css" type="text/css" />
  8 <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
  9 <link rel="stylesheet" href="styles/thickbox.css" type="text/css" />
 10 
 11     <script src="scripts/jquery-1.3.1.js"></script>
 12     <script src="scripts/jquery.jqzoom.js"></script>
 13     <script src="scripts/use_jqzoom.js"></script>
 14     <script src="scripts/jquery.livequery.js"></script>
 15     <script src="scripts/detail.js"></script>
 16 </head>
 17 
 18 <body>
 19 <!--頭部開始-->
 20 <div id="header">
 21     <a id="logo" href="#">我的Jane Shopping</a>
 22     <ul id="skin">
 23         <li id="skin_0" title="藍色" class="selected">藍色</li>
 24         <li id="skin_1" title="紫色">紫色</li>
 25         <li id="skin_2" title="紅色">紅色</li>
 26         <li id="skin_3" title="天藍色">天藍色</li>
 27         <li id="skin_4" title="橙色">橙色</li>
 28         <li id="skin_5" title="淡綠色">淡綠色</li>
 29     </ul>
 30 </div>
 31 <!--頭部結束-->
 32 <!--導航開始-->
 33 <div id="navigation">
 34     <ul>
 35          <li><a href="#">首 頁</a></li>
 36          <li><a href="#">襯 衫</a>
 37                 <ul>
 38                      <li><a href="#">短袖襯衫</a></li>
 39                      <li><a href="#">長袖襯衫</a></li>
 40                      <li><a href="#">無袖襯衫</a></li>
 41                 </ul>
 42         </li>
 43         <li><a href="#">衛 衣</a>
 44                 <ul>
 45                      <li><a href="#">開襟衛衣</a></li>
 46                      <li><a href="#">套頭衛衣</a></li>
 47                 </ul>
 48          </li>
 49         <li><a href="#">褲 子</a>
 50                 <ul>
 51                      <li><a href="#">休閑褲</a></li>
 52                      <li><a href="#">卡其褲</a></li>
 53                      <li><a href="#">牛仔褲</a></li>
 54                      <li><a href="#">短褲</a></li>
 55                 </ul>
 56          </li>
 57          <li><a href="#">聯系我們</a></li>
 58     </ul>
 59 </div>
 60 <!--導航結束-->
 61 <!--主體內容開始-->
 62 <div id="content" class="global_module">
 63     <h3>商品信息</h3>
 64     <div class="pro_detail">
 65         <!--左邊-->
 66         <div class="pro_detail_left">
 67             <div class="jqzoom">
 68                 <img src="images/pro_img/blue_one_small.jpg" class="fs" alt=""  jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
 69             </div>
 70             <!--點擊觀看大圖-->
 71             <span>
 72             <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介紹文字" class            ="thickbox">
 73                 <img alt="點擊看大圖" src="images/look.gif" />
 74             </a>
 75             </span>
 76             <ul class="imgList">
 77                 <li><img src="images/pro_img/blue_one.jpg" alt="" /></li>
 78                 <li><img src="images/pro_img/blue_two.jpg" alt="" /></li>
 79                 <li><img src="images/pro_img/blue_three.jpg" alt="" /></li>
 80             </ul>
 81             <!--tab欄切換-->
 82             <div class="tab">
 83                 <div class="tab_menu">
 84                     <ul>
 85                         <li class="selected">產品屬性</li>
 86                         <li>產品尺碼表</li>
 87                         <li>產品介紹</li>
 88                     </ul>
 89                 </div>
 90                 <div class="tab_box">
 91                     <div>沿用風靡百年的經典全棉牛津紡面料,通過領先的液氨整理技術,使面料的抗皺性能更上一層。延續簡約、舒適、健康設計理念,特推出免燙、易打理的精細免燙牛津紡長袖襯衫系列。 
 92                     </div>
 93                     <div class="hide">
 94                     來自新疆無污染的生態棉花,采用緊密紡精梳棉紗,單經雙緯的織造組織,造就了顆粒飽滿、朴實無華、溫潤細膩的經典牛津紡,易洗快干、手感豐軟、吸濕性好。設計師遵循布料完美肌理,立體剪裁,以直筒明門襟的經典造型、配合圓袋、曲擺的現代人性化裁減,相得益彰,渾然天成。色彩明快的純色襯衫簡潔、自然、為您營造出利落、爽朗的形象,透出熱情、優雅的個性;精選白、藍、淡粉、寬條紋、英國格等10余種明亮、經典花型,色彩繽紛呈現,以適合本季着裝,更顯自然、舒適境界。
 95                     </div>
 96                     <div class="hide">
 97                     世界權威德國科德寶的襯和英國高士縫紉線使成衣領型自然舒展、永不變形,縫線部位平服工整、牢固耐磨;人性化的4片式后背打褶結構設計提供更舒適的活動空間;領尖扣的領型設計戴或不戴領帶風格炯同、瞬間呈現;醇正天然設計,只為彰顯自然榮耀。
 98                     </div>
 99                 </div>
100             </div>
101             <!--tab欄切換結束-->
102         </div>
103         <!--右邊-->
104         <div class="pro_detail_right">
105             <h4>免燙高支棉條紋襯衣</h4>
106             <p>全新精品高支棉襯衫再次提升品質,精選100%新疆長絨棉織造而成,平整度好,短絨少; 80-100高支雙股經緯交織,帶來無與倫比的舒適享受;而且面料反光效果好,具有漂亮的光澤,質感上佳,有利於免燙效果的維持。※不僅如此,深受消費者歡迎的經典款式使精品高支棉襯衫更貼合東方人身型氣質,多款襯衫還采用簡單且個性鮮明條紋元素,利用最為單純的幾何線條,透過條紋的粗細、寬窄間的重組,帶出令人耳目一新的時尚氣息,更顯出俊朗男士的挺拔身型!</p>
107             <p><strong>現價:200元  <del>原價:300元</del></strong></p>
108             <p><strong>編號:33313993</strong></p>
109             <!--顏色選擇-->
110             <div class="color_change">
111                 顏色:<strong>藍白</strong>
112                 <ul>
113                     <li><img src="images/pro_img/blue.jpg" alt="藍白" /></li>
114                     <li><img src="images/pro_img/yellow.jpg" alt="黃白" /></li>
115                     <li><img src="images/pro_img/green.jpg" alt="粉綠" /></li>
116                 </ul>
117             </div>
118             <!--尺寸選擇-->
119             <div class="pro_size">
120                 尺寸:<strong>未選擇</strong>
121                 <ul>
122                     <li><span>S</span></li>
123                     <li><span>L</span></li>
124                     <li><span>SL</span></li>
125                     <li><span>LL</span></li>
126                 </ul>
127             </div>
128             <!--數量選擇-->
129             <div class="pro_num">
130                 數量:
131                 <select id="num_sort" style="width:40px;" >
132                     <option value="1">1</option>
133                     <option value="2">2</option>
134                     <option value="3">3</option>
135                     <option value="4">4</option>
136                     <option value="5">5</option>
137                 </select>
138             </div>
139             <!--價格合計-->
140             <div class="pro_price">
141                 總計:<span>200</span>142             </div>
143             <!--商品評分-->
144             <div class="pro_rating">
145                 給商品評分:
146                 <ul class="rating nostar">
147                     <li class="one"><a href="#" title="1分">1</a></li>
148                     <li class="two"><a href="#" title="2分">2</a></li>
149                     <li class="three"><a href="#" title="3分">3</a></li>
150                     <li class="four"><a href="#" title="4分">4</a></li>
151                     <li class="five"><a href="#" title="5分">5</a></li>
152                 </ul>
153             </div>
154             <!--購物車-->
155             <div id="cart">
156                 <a href="#"><img src="images/btn_cart.png"/></a>
157             </div>
158         </div>
159     </div>
160 </div>
161 <!--主體內容結束-->
162 </body>
163 </html>

js代碼頁:

  1 $(function () {
  2     // 換皮膚
  3     var $li=$('#skin li');
  4     $li.click(function () {
  5         switchSkin(this.id);
  6     })
  7     // 放大鏡
  8     $('.jqzoom').jqueryzoom({
  9         xzoom:300,
 10         yzoom:300,
 11         offset:10,
 12         position:'right',
 13         preload:1
 14     })
 15     /*點擊左側產品小圖片切換大圖*/
 16     $('.pro_detail_left ul li img').livequery('click',function () {
 17                 var imgSrc=$(this).attr('src');
 18                 var i=imgSrc.lastIndexOf(".");
 19                 var unit=imgSrc.substring(i);
 20                 imgSrc=imgSrc.substring(0,i);
 21                 var imgSrc_small=imgSrc+"_small"+unit;
 22                 var imgSrc_big=imgSrc+"_big"+unit;
 23                 $('#bigImg').attr({'src':imgSrc_small,'jqimg':imgSrc_big});
 24                 $('#thickImg').attr('href',imgSrc_big);
 25     })
 26     /*Tab 選項卡 標簽*/
 27     var $div_li=$('div.tab_menu ul li');
 28     $div_li.click(function () {
 29         $(this).addClass('selected')
 30             .siblings().removeClass('selected');
 31         var index=$div_li.index(this);
 32         $('div.tab_box>div')
 33             .eq(index).show()
 34             .siblings().hide();
 35     })
 36     /*衣服顏色切換*/
 37     $('.color_change ul li img').click(function () {
 38         var imgSrc=$(this).attr('src');
 39         var i=imgSrc.lastIndexOf('.');
 40         var unit=imgSrc.substring(i);
 41         imgSrc=imgSrc.substring(0,i);
 42         var imgSrc_small=imgSrc+'_one_small'+unit;
 43         var imgSrc_big=imgSrc+"_one_big"+unit;
 44         $('#bigImg').attr({'src':imgSrc_small,'jqimg':imgSrc_big});
 45         $('#thickImg').attr('href',imgSrc_big);
 46         var alt=$(this).attr('alt');
 47         $('.color_change strong').text(alt);
 48         var url=imgSrc+'.html';
 49         $('.pro_detail_left ul.imgList')
 50             .empty()
 51             .load(url);
 52 
 53     })
 54     /*衣服尺寸選擇*/
 55     $(".pro_size li span").click(function(){
 56         $(this).parents("ul").siblings("strong").text(  $(this).text() );
 57     })
 58     /*數量和價格聯動*/
 59     var $span=$('.pro_price span');
 60     var price=$span.text();
 61     $('#num_sort').change(function () {
 62         var num=$(this).val();
 63         var amount=num*price;
 64         $span.text(amount);
 65     }).change();
 66     /*商品評分效果*/
 67     $('ul.rating li a').click(function () {
 68         var title=$(this).attr('title');
 69         alert("您給此商品的評分是:"+title);
 70         var cl=$(this).parent().attr('class');
 71         $(this).parent().parent().removeClass().addClass('rating  '+cl+'star');
 72     })
 73     // *最終購買輸出*/
 74     var $product=$('.pro_detail_right');
 75         $("#cart a").click(function(){
 76             var pro_name = $product.find("h4:first").text();
 77             var pro_size = $product.find(".pro_size strong").text();
 78             var pro_color =  $(".color_change strong").text();
 79             var pro_num = $product.find("#num_sort").val();
 80             var pro_price = $product.find(".pro_price span").text();
 81         var dialog = " 感謝您的購買。\n您購買的\n"+
 82             "產品是:"+pro_name+";\n"+
 83             "尺寸是:"+pro_size+";\n"+
 84             "顏色是:"+pro_color+";\n"+
 85             "數量是:"+pro_num+";\n"+
 86             "總價是:"+pro_price +"元。";
 87         if(confirm(dialog)){
 88             alert('您已經下單了');
 89         }
 90             return false;//避免頁面跳轉
 91     })
 92 
 93 
 94 
 95 
 96 
 97 
 98 });
 99 
100 
101 function switchSkin(skinName){
102     $('#'+skinName).addClass('selected')
103         .siblings().removeClass('selected');
104     $("#cssfile").attr("href","styles/skin/"+ skinName +".css");
105 
106 }

css代碼:

/*主體內容樣式*/
#content{
    border:1px solid #AAA;
    margin:10px auto;
    width:800px;
}
.global_module h3 { 
    height:26px; 
    background:#3B5998;
    color:#FFF; 
    line-height:26px; 
    text-indent:6px;
}
.pro_detail { 
    width:780px; 
    height:auto;
    overflow:hidden; 
    padding:10px;
}
/*左列*/
.pro_detail_left { 
    width:380px;
    float:left;
    overflow:hidden;
}

.pro_detail_left .jqzoom{
    border:1px solid #BBB;
    float:left;
    position:relative;
    padding:0px;
    cursor:pointer;
}

.pro_detail_left .fs {
    width:300px;
    height:300px; 
}

.pro_detail_left span { 
    display:block;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    width:310px;
    clear:both; 
}
.pro_detail_left span a:hover{ 
    text-decoration:none;
}
.pro_detail_left ul.imgList{
    height: 80px;
}
.pro_detail_left ul.imgList li { 
    float:left;
    margin-right:10px;  
}
.pro_detail_left ul.imgList li img { 
    width:60px; 
    height:60px; 
    padding:1px;
    background:#EEE;
    cursor:pointer; 
}
.pro_detail_left ul.imgList li img:hover { 
    padding:1px; 
    background:#999; 
}
.pro_detail_left .tab { 
    width:100%;
}

.pro_detail_left .tab_menu { 
    clear:both;
}
.pro_detail_left .tab_menu li { 
    float:left; 
    text-align:center; 
    cursor:pointer; 
    list-style:none; 
    padding:1px 6px; 
    margin-right:4px; 
    background:#F1F1F1;
    border:1px solid #898989; 
    border-bottom:none;
}
.pro_detail_left .tab_menu li.hover { 
    background:#DFDFDF;
}
.pro_detail_left .tab_menu li.selected { 
    color:#FFF; 
    background:#6D84B4;
}
.pro_detail_left .tab_box { 
    clear:both; 
    border:1px solid #898989;
}
.pro_detail_left .hide{
    display:none
}


/*右列*/
.pro_detail_right { 
    width:380px;  
    float:left; 
    margin:10px;
}

.pro_detail_right .color_change { 
    width:380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .color_change ul li { 
    float:left; 
    margin-right:10px; 
}
.pro_detail_right .color_change img { 
    width:30px; 
    height:30px; 
    padding:1px; 
    background:#EEE;
    border:1px solid #BBB;cursor:pointer; 
}
.pro_detail_right .color_change img:hover { 
    padding:1px; 
    background:#999; 
}
.pro_detail_right .pro_size {
    width:380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .pro_size ul li{
    float:left; 
    margin-right:5px; 
}
.pro_detail_right .pro_size ul li span{ 
    display:block; 
    margin-right:6px; 
    padding:1px 12px; 
    border:1px solid #AAA;
    cursor:pointer; 
}
.pro_detail_right .pro_size ul li span:hover {
    background:#CCC; 
}
.pro_detail_right .pro_num { 
    width:380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .pro_price { 
    width:380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .pro_rating { 
    width:380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
/* 評分css */
.rating{
    width:80px;
    height:16px;
    margin:0 0 20px 0;
    padding:0;
    list-style:none;
    clear:both;
    position:relative;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
}
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
    cursor: pointer;
    float:left;
    text-indent:-999em;
}
ul.rating li a {
    position:absolute;
    left:0;
    top:0;
    width:16px;
    height:16px;
    text-decoration:none;
    z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
    z-index:2;
    width:80px;
    height:16px;
    overflow:hidden;
    left:0;    
    background: url(../images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}

/*jQzoom*/
div.zoomdiv {
    z-index:    999;
    position                : absolute;
    top:0px;
    left:0px;
    width                   : 200px;
    height                  : 200px;
    background: #ffffff;
    border:1px solid #CCCCCC;
    display:none;
    text-align: center;
    overflow: hidden;
}
div.jqZoomPup {
    z-index                 : 999;
    visibility              : hidden;
    position                : absolute;
    top:0px;
    left:0px;
    width                   : 50px;
    height                  : 50px;
    border: 1px solid #aaa;
    background: #ffffff url(../images/zoomlens.gif) 50% top  no-repeat;;
    opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(Opacity=50);
}

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM