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. 无法对数据库'XXX' 执行删除，因为它正用于复制"的解决方

    困扰二天的问题终于得以解决,貌似一个棘手的问题只要知道方法也似乎变得异常简单,记录此次的解决方法,避免遗忘. 无法对 数据库'UDS' 执行 删除,因为它正用于复制. (.Net SqlClient ...

  2. IIs 中运行asp程序出现“An error occurred on the server when processing the URL. Please contact the system administrator.”错误

    在个人的win08系统上使用IIs运行 asp程序结果出现了以下错误 An error occurred on the server when processing the URL. Please c ...

  3. Ubuntu 中/etc/resolv.conf 文件修改丢失的解决方案

    方法一 1.需要创建一个文件/etc/resolvconf/resolv.conf.d/tail sudo vi /etc/resolvconf/resolv.conf.d/tail 2.在该文件中写 ...

  4. [Functional Programming] Working with two functors（Applicative Functors）-- Part1 --.ap

    What is applicative functor: the ability to apply functors to each other. For example we have tow fu ...

  5. MYSQL获取自增主键【4种方法】（转）

    转自:http://blog.csdn.net/ultrani/article/details/9351573 作者已经写的非常好了,我不废话了,直接转载收藏: 通常我们在应用中对mysql执行了in ...

  6. 【Project Euler 8】Largest product in a series

    题目要求是: The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × ...

  7. 开发自己的One Page Scroll插件（二）

    开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...

  8. 使用HTML5的两个api，前端js完成图片压缩

    主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...

  9. Discuz常见小问题-如何设置为人工审核

    全局-注册与访问控制-人工审核    

  10. localhost连接慢如何解决?

    localhost连接慢如何解决 php 环境本地用ip连接mysql响应快, 今天碰到一个连接mysql的怪问题,我在php 环境本地用ip连接mysql响应快,用localhost连接慢,后来百度 ...