jquery衬衣产品内容详情页

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

通过日志过滤的方法，统计每天内容详情页面的PV数
1.目的: 每天凌晨0点1分统计用户点击进入内容详情页的次数,对内容点击量形成榜单. 2.分析: A./data/log/epg.access.log日志实时打印用户访问页面的日志,并且每天凌晨0点会 ...
aspcms产品详情页调取相关产品
产品详情页调用相关产品最常见的应用就是装饰公司网站,设计师页面要求调取设计师做过的案例.aspcms本身有这个功能,但不能完全符合要求,看代码 {aspcms:content sort={aspcms ...
用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介
在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...
从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文
一.博客系统进度回顾上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...
自己定义ViewGroup实现仿淘宝的商品详情页
近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
1、找出url汇总页，过滤出满足条件的详情页url；2、去详情页采集信息
1.找出url汇总页,过滤出满足条件的详情页url:2.去详情页采集信息 package main import ( "fmt" "github.com/gocolly/ ...
vue2.0 + vux （六）NewsList 资讯页及 NewsDetail 资讯详情页
设置代理,避免出现跨域问题 /*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2 ...
如何让Android微博个人详情页滚动到顶部
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/103 个人详情页滑动到顶部最近产品提了个新需求,需要实现 ...

随机推荐

【转载】秒杀场景下MySQL的低效原因和改进以及Redis的处理
分享的PPT在如下网址: http://www.doc88.com/p-4199037770087.html 秒杀场景下mysql的低效原因和改进另外有一个篇文章是针对以上内容的总结: http:/ ...
CUDA,cudnn一些常见版本问题
- 最好的方法是官网说明: https://tensorflow.google.cn/install/source_windows Version Python version Compiler Bu ...
小议使用“完整”的CSS的缺点
1.浏览器支持的不一致性浏览器的漏洞或缺乏支持的CSS功能,导致不同的浏览器显示出不同的CSS版面编排.例如在微软Internet Explorer6.0的旧版本 ,执行了许多自己的CSS2.0属性 ...
HTTPS服务器配置
一.SSL证书申请 1.确认需要申请证书的域名 2.生成私钥和csr文件在linux机器上执行以下命令生成私钥 #openssl genrsa -out server.key 2048 在linux ...
（转）D3d9c的固定渲染管道（fixed function pipeline）与可编程管道（programmable function pipeline）的异同点
转自:http://blog.csdn.net/tspatial_thunder/article/details/5937701 现在的游戏图形部分越来多依靠GPU来渲染绘制.说起GPU先说着色器,着 ...
【pyhon】nvshens图片批量下载爬虫
代码: # nvshens图片批量下载爬虫 from bs4 import BeautifulSoup import requests import time import urllib.reques ...
oracle中database links的使用
1.在pl/sql developer中创建database links 2.使用database links select * from table1@xtbg 注意:@xtbg是database ...
vue2.x 总结
1.独立构建vs运行时构建在按照vue1.0的配置配置好webpack后,会出现Failed to mount component: template or render function not ...
[转发]using的几种用法
1.using指令.using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到. ...
putty(winscp)无法连接到linux(ubuntu)
为了能在自己笔记本电脑上兼容公司的用64位系统编译出来的MapReduce程序,我把自己原来32位的ubuntu虚拟机删除后,安装了目前最新的ubuntu-14.04.2-desktop-amd64. ...

jquery衬衣产品内容详情页

jquery衬衣产品内容详情页的更多相关文章

随机推荐

热门专题