html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>我的Jane shopping</title>

 <link rel="stylesheet" href="styles/main.css" type="text/css" />//样式

 <link rel="stylesheet" href="styles/detail.css" type="text/css" />

 <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />

 <link rel="stylesheet" href="styles/thickbox.css" type="text/css" />

     <script src="scripts/jquery-1.3.1.js"></script>

     <script src="scripts/jquery.jqzoom.js"></script>

     <script src="scripts/use_jqzoom.js"></script>

     <script src="scripts/jquery.livequery.js"></script>

     <script src="scripts/detail.js"></script>

 </head>

 <body>

 <!--头部开始-->

 <div id="header">

     <a id="logo" href="#">我的Jane Shopping</a>

     <ul id="skin">

         <li id="skin_0" title="蓝色" class="selected">蓝色</li>

         <li id="skin_1" title="紫色">紫色</li>

         <li id="skin_2" title="红色">红色</li>

         <li id="skin_3" title="天蓝色">天蓝色</li>

         <li id="skin_4" title="橙色">橙色</li>

         <li id="skin_5" title="淡绿色">淡绿色</li>

     </ul>

 </div>

 <!--头部结束-->

 <!--导航开始-->

 <div id="navigation">

     <ul>

          <li><a href="#">首 页</a></li>

          <li><a href="#">衬 衫</a>

                 <ul>

                      <li><a href="#">短袖衬衫</a></li>

                      <li><a href="#">长袖衬衫</a></li>

                      <li><a href="#">无袖衬衫</a></li>

                 </ul>

         </li>

         <li><a href="#">卫 衣</a>

                 <ul>

                      <li><a href="#">开襟卫衣</a></li>

                      <li><a href="#">套头卫衣</a></li>

                 </ul>

          </li>

         <li><a href="#">裤 子</a>

                 <ul>

                      <li><a href="#">休闲裤</a></li>

                      <li><a href="#">卡其裤</a></li>

                      <li><a href="#">牛仔裤</a></li>

                      <li><a href="#">短裤</a></li>

                 </ul>

          </li>

          <li><a href="#">联系我们</a></li>

     </ul>

 </div>

 <!--导航结束-->

 <!--主体内容开始-->

 <div id="content" class="global_module">

     <h3>商品信息</h3>

     <div class="pro_detail">

         <!--左边-->

         <div class="pro_detail_left">

             <div class="jqzoom">

                 <img src="data:images/pro_img/blue_one_small.jpg" class="fs" alt=""  jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>

             </div>

             <!--点击观看大图-->

             <span>

             <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class            ="thickbox">

                 <img alt="点击看大图" src="data:images/look.gif" />

             </a>

             </span>

             <ul class="imgList">

                 <li><img src="data:images/pro_img/blue_one.jpg" alt="" /></li>

                 <li><img src="data:images/pro_img/blue_two.jpg" alt="" /></li>

                 <li><img src="data:images/pro_img/blue_three.jpg" alt="" /></li>

             </ul>

             <!--tab栏切换-->

             <div class="tab">

                 <div class="tab_menu">

                     <ul>

                         <li class="selected">产品属性</li>

                         <li>产品尺码表</li>

                         <li>产品介绍</li>

                     </ul>

                 </div>

                 <div class="tab_box">

                     <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。

                     </div>

                     <div class="hide">

                     来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。

                     </div>

                     <div class="hide">

                     世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。

                     </div>

                 </div>

             </div>

             <!--tab栏切换结束-->

         </div>

         <!--右边-->

         <div class="pro_detail_right">

             <h4>免烫高支棉条纹衬衣</h4>

             <p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持。※不仅如此，深受消费者欢迎的经典款式使精品高支棉衬衫更贴合东方人身型气质，多款衬衫还采用简单且个性鲜明条纹元素，利用最为单纯的几何线条，透过条纹的粗细、宽窄间的重组，带出令人耳目一新的时尚气息，更显出俊朗男士的挺拔身型！</p>

             <p><strong>现价：200元  <del>原价：300元</del></strong></p>

             <p><strong>编号：33313993</strong></p>

             <!--颜色选择-->

             <div class="color_change">

                 颜色：<strong>蓝白</strong>

                 <ul>

                     <li><img src="data:images/pro_img/blue.jpg" alt="蓝白" /></li>

                     <li><img src="data:images/pro_img/yellow.jpg" alt="黄白" /></li>

                     <li><img src="data:images/pro_img/green.jpg" alt="粉绿" /></li>

                 </ul>

             </div>

             <!--尺寸选择-->

             <div class="pro_size">

                 尺寸：<strong>未选择</strong>

                 <ul>

                     <li><span>S</span></li>

                     <li><span>L</span></li>

                     <li><span>SL</span></li>

                     <li><span>LL</span></li>

                 </ul>

             </div>

             <!--数量选择-->

             <div class="pro_num">

                 数量：

                 <select id="num_sort" style="width:40px;" >

                     <option value="1">1</option>

                     <option value="2">2</option>

                     <option value="3">3</option>

                     <option value="4">4</option>

                     <option value="5">5</option>

                 </select>

             </div>

             <!--价格合计-->

             <div class="pro_price">

                 总计：<span>200</span>元

             </div>

             <!--商品评分-->

             <div class="pro_rating">

                 给商品评分：

                 <ul class="rating nostar">

                     <li class="one"><a href="#" title="1分">1</a></li>

                     <li class="two"><a href="#" title="2分">2</a></li>

                     <li class="three"><a href="#" title="3分">3</a></li>

                     <li class="four"><a href="#" title="4分">4</a></li>

                     <li class="five"><a href="#" title="5分">5</a></li>

                 </ul>

             </div>

             <!--购物车-->

             <div id="cart">

                 <a href="#"><img src="data:images/btn_cart.png"/></a>

             </div>

         </div>

     </div>

 </div>

 <!--主体内容结束-->

 </body>

 </html>

js代码页：

 $(function () {

     // 换皮肤

     var $li=$('#skin li');

     $li.click(function () {

         switchSkin(this.id);

     })

     // 放大镜

     $('.jqzoom').jqueryzoom({

         xzoom:300,

         yzoom:300,

         offset:10,

         position:'right',

         preload:1

     })

     /*点击左侧产品小图片切换大图*/

     $('.pro_detail_left ul li img').livequery('click',function () {

                 var imgSrc=$(this).attr('src');

                 var i=imgSrc.lastIndexOf(".");

                 var unit=imgSrc.substring(i);

                 imgSrc=imgSrc.substring(0,i);

                 var imgSrc_small=imgSrc+"_small"+unit;

                 var imgSrc_big=imgSrc+"_big"+unit;

                 $('#bigImg').attr({'src':imgSrc_small,'jqimg':imgSrc_big});

                 $('#thickImg').attr('href',imgSrc_big);

     })

     /*Tab 选项卡 标签*/

     var $div_li=$('div.tab_menu ul li');

     $div_li.click(function () {

         $(this).addClass('selected')

             .siblings().removeClass('selected');

         var index=$div_li.index(this);

         $('div.tab_box>div')

             .eq(index).show()

             .siblings().hide();

     })

     /*衣服颜色切换*/

     $('.color_change ul li img').click(function () {

         var imgSrc=$(this).attr('src');

         var i=imgSrc.lastIndexOf('.');

         var unit=imgSrc.substring(i);

         imgSrc=imgSrc.substring(0,i);

         var imgSrc_small=imgSrc+'_one_small'+unit;

         var imgSrc_big=imgSrc+"_one_big"+unit;

         $('#bigImg').attr({'src':imgSrc_small,'jqimg':imgSrc_big});

         $('#thickImg').attr('href',imgSrc_big);

         var alt=$(this).attr('alt');

         $('.color_change strong').text(alt);

         var url=imgSrc+'.html';

         $('.pro_detail_left ul.imgList')

             .empty()

             .load(url);

     })

     /*衣服尺寸选择*/

     $(".pro_size li span").click(function(){

         $(this).parents("ul").siblings("strong").text(  $(this).text() );

     })

     /*数量和价格联动*/

     var $span=$('.pro_price span');

     var price=$span.text();

     $('#num_sort').change(function () {

         var num=$(this).val();

         var amount=num*price;

         $span.text(amount);

     }).change();

     /*商品评分效果*/

     $('ul.rating li a').click(function () {

         var title=$(this).attr('title');

         alert("您给此商品的评分是："+title);

         var cl=$(this).parent().attr('class');

         $(this).parent().parent().removeClass().addClass('rating  '+cl+'star');

     })

     // *最终购买输出*/

     var $product=$('.pro_detail_right');

         $("#cart a").click(function(){

             var pro_name = $product.find("h4:first").text();

             var pro_size = $product.find(".pro_size strong").text();

             var pro_color =  $(".color_change strong").text();

             var pro_num = $product.find("#num_sort").val();

             var pro_price = $product.find(".pro_price span").text();

         var dialog = " 感谢您的购买。\n您购买的\n"+

             "产品是："+pro_name+"；\n"+

             "尺寸是："+pro_size+"；\n"+

             "颜色是："+pro_color+"；\n"+

             "数量是："+pro_num+"；\n"+

             "总价是："+pro_price +"元。";

         if(confirm(dialog)){

             alert('您已经下单了');

         }

             return false;//避免页面跳转

     })

 });

 function switchSkin(skinName){

     $('#'+skinName).addClass('selected')

         .siblings().removeClass('selected');

     $("#cssfile").attr("href","styles/skin/"+ skinName +".css");

 }

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衬衣产品内容详情页的更多相关文章

  1. 通过日志过滤的方法，统计每天内容详情页面的PV数

    1.目的: 每天凌晨0点1分统计用户点击进入内容详情页的次数,对内容点击量形成榜单. 2.分析: A./data/log/epg.access.log日志实时打印用户访问页面的日志,并且每天凌晨0点会 ...

  2. aspcms产品详情页调取相关产品

    产品详情页调用相关产品最常见的应用就是装饰公司网站,设计师页面要求调取设计师做过的案例.aspcms本身有这个功能,但不能完全符合要求,看代码 {aspcms:content sort={aspcms ...

  3. 用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介

    在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...

  4. 从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  5. 自己定义ViewGroup实现仿淘宝的商品详情页

    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...

  6. python 全栈开发，Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  7. 1、找出url汇总页，过滤出满足条件的详情页url；2、去详情页采集信息

    1.找出url汇总页,过滤出满足条件的详情页url:2.去详情页采集信息 package main import ( "fmt" "github.com/gocolly/ ...

  8. vue2.0 + vux （六）NewsList 资讯页 及 NewsDetail 资讯详情页

    设置代理,避免出现跨域问题 /*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2 ...

  9. 如何让Android微博个人详情页滚动到顶部

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/103 个人详情页滑动到顶部 最近产品提了个新需求,需要实现 ...

随机推荐

  1. Python学习（二）Python 简介

    Python 简介 官方指南及文档 Python2.7官方指南(中文版):http://pan.baidu.com/s/1dDm18xr Python3.4官方指南(中文版):http://pan.b ...

  2. iOS开源项目：SVPullToRefresh

    SVPullToRefresh也是一个下拉刷新的项目:https://github.com/samvermette/SVPullToRefresh SVPullToRefresh 允许你通过一行代码把 ...

  3. Proxmark3介绍

    Proxmark3介绍 Proxmark3是由Jonathan Westhues设计并且开发的开源硬件,其主要用RFID的嗅探.读取以及克隆等的操作. 其官方网站为:Jonathan Westhues ...

  4. Fragment 简介 基础知识 总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. Node.js：Express 框架

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完整功能的网站 ...

  6. XMPP键盘订制实现图文混排

    在现阶段的通信服务中,各种标准都有,因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...

  7. 在低带宽或不可靠的网络环境中安装 Visual Studio 2017

    在低带宽或不可靠的网络环境中安装 Visual Studio 2017 2017-4-141 分钟阅读时长 作者  https://docs.microsoft.com/zh-cn/visualstu ...

  8. C++ 踩内存

    1.从上往下,栈在堆上面(记忆方法:站在堆上面),二者向里压缩,也就是说,栈地址减少,堆地址增加.栈顶是小地址. 2.模拟踩内存,让程序崩溃.代码如下: int main(int argc, char ...

  9. Makefile 编译静态库

    CC = gcc AR = ar FLAGS = -Wall -lpthread CLOUD = cloud_server OBJ += cloud_server.o LIB = libccloud. ...

  10. vue - 添加sass(less)处理

    1. 添加less.sass处理 1.1如果是sass,首先在当前目录安装处理插件(sass): npm i -D node-sass sass-loader 1.2如果是less,首先在当前目录安装 ...