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="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 = " 感谢您的购买。
您购买的
"+
 82             "产品是："+pro_name+"；
"+
 83             "尺寸是："+pro_size+"；
"+
 84             "颜色是："+pro_color+"；
"+
 85             "数量是："+pro_num+"；
"+
 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;
    800px;
}
.global_module h3 { 
    height:26px; 
    background:#3B5998;
    color:#FFF; 
    line-height:26px; 
    text-indent:6px;
}
.pro_detail { 
    780px; 
    height:auto;
    overflow:hidden; 
    padding:10px;
}
/*左列*/
.pro_detail_left { 
    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 {
    300px;
    height:300px; 
}

.pro_detail_left span { 
    display:block;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    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 { 
    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 { 
    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 { 
    380px;  
    float:left; 
    margin:10px;
}

.pro_detail_right .color_change { 
    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 { 
    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 {
    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 { 
    380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .pro_price { 
    380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
.pro_detail_right .pro_rating { 
    380px;
    font-weight:bold;
    float:left; 
    display:inline;
    margin-bottom:10px; 
}
/* 评分css */
.rating{
    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;
    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;
    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);
}

相关阅读:
Windows——bat中的路径和工具栏运行bat的坑
 KBE——查询
 KBE实践——登录案例
 KBE_运作流程
 KBE_创建项目和基本常识
 python_面向对象
 程序员常见面试之数据库知识点小结（三）
C#编程总结
 人人必知的10个 jQuery 小技巧
 Javascript生成二维码（QR）
原文地址：https://www.cnblogs.com/yangguoe/p/8244665.html