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="data: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="data:images/look.gif" />
 74             </a>
 75             </span>
 76             <ul class="imgList">
 77                 <li><img src="data:images/pro_img/blue_one.jpg" alt="" /></li>
 78                 <li><img src="data:images/pro_img/blue_two.jpg" alt="" /></li>
 79                 <li><img src="data: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="data:images/pro_img/blue.jpg" alt="蓝白" /></li>
114                     <li><img src="data:images/pro_img/yellow.jpg" alt="黄白" /></li>
115                     <li><img src="data: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="data: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);
}

jquery衬衣产品内容详情页相关推荐

列表页详情页html源码,UI布局欣赏：文章列表与内容详情页设计
UI布局欣赏:文章列表与内容详情页设计 3月 23, 2017 评论 Sponsor 信息内容几乎是每个新闻.博客.摄影.社区等类型媒体常用的功能,所以他们一般都会拥有信息的列表页和内容详情页面的设计 ...
今日头条与网易新闻客户端内容详情页对比
左图为网易新闻客户端,右图为今日头条 1.相同功能点和不同功能点: 2.关键功能差异: 对于资讯类平台,核心是文章以及会产生关联行为的功能,文章,分享,评论,相关阅读等. 2.1 分享:今日头条截图后 ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
弘辽科技：淘宝详情页装修影响权重吗？有什么弊端
现如今提起我们都知道对于淘宝商城来说权重是非常重要的,所以各位卖家会想尽措施去提高权重,一些能够降权事情都尽量不去做,但是难免会避免不了触犯到,那么淘宝详情装修影响权重吗?有什么弊端? 淘宝详情装修影 ...
亚马逊跨境电商如何编辑产品详情页亚马逊产品listing优化
产品详情页是买家了解产品的重要途径.也是影响产品转化率的重要因素.今天海熹跨境人才网给大家分享一下关于亚马逊跨境电商产品详情页的优化,亚马逊产品listing优化.一起来了解一下吧. 1:售前关联营销 ...
JS实现放大镜的效果 —— 仿京东详情页中的产品放大效果
案例简述这次案列是模仿京产品详情页中,产品图放大的效果. 简单说下效果的具体步骤: 1.鼠标经过预览区时,遮盖层和产品大图显示:鼠标离开则隐藏 2.遮盖层跟随鼠标进行移动,并且遮盖层只在预览区域内移 ...
我是如何实现前端H5第一个产品详情页实现的思路及步骤。
今天公司讨论了,接下来,我们为我们的单品网的工作具体任务安排. 由老马来组织召开了三人的简单会议. 会议就在整个开放的大办公室里(40-50人)进行,我,老马,老卢,坐在一个小圆桌上,开始了我们的会议 ...
WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
关于ASP.NET给产品分类，分页，详情页生成静态页面
之前讲了如何给栏目页生成静态.现在剩下复杂的产品分类,分页,详情页生成静态页面. 我采用的原理是.产品分类通过循环全部生成静态页面. 这个就不说了,跟之前生成栏目页方法一样. 接下来是产品分页和详情页 ...
php图片点击查看大图,jQuery点击小图看大图，大图查看内容详情所有图片
jQuery点击小图看大图,大图查看内容详情所有图片: html代码如下: × < > CSS代码如下: * { margin:0; padding:0; } body { overflo ...

jquery衬衣产品内容详情页

jquery衬衣产品内容详情页相关推荐

最新文章

热门文章