{template 'header.html'}
<style>
body{background:#ffffff;}
	   .right{width: 1000px;margin: 0 auto;padding-bottom: 70px;}
	   .tab-content{padding: 10px;border: 1px solid #e5e5e5;margin-top: 30px;}
</style>
<div id="container" class="clearfix">
  <div class="right">
    <div class="content"> 
      <!-- start -->
      <!-- end --> 
      <!-- 产品详细 -->
      <div class="product_detail" id="pd1">
        <div class="allcontent clearfix">
          <div style="float: left;position: relative;padding-right: 90px;">
          
          
          
          
          
<style>
/*放大镜*/ 
.ZoomMain {width:510px;height:528px;float:left;position:relative;} 
.ZoomMain .zoom {height:526px;width:415px;position:relative;border: 1px solid #dcdddd; float:left; } 
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:195px; height:247px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);} 
.ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;height:526px;width:415px; position:absolute;right:-425px;top:0px; overflow:hidden;} 
.littleImg {width:82px;overflow:hidden;position:relative; float:right;} 
.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;} 
.littleImg span em {display: none;width:10px;height:55px;} 
.littleImg span.btnL {left:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;} 
.littleImg span.btnL em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;} 
.littleImg span.btnR em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;} 
.littleImg span.btnR {right:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;} 
.littleImg span.hover em {display:block;} 
.littleImg .slideMain {width:82px;height:528px;overflow:hidden;position:relative;} 
.littleImg .slideMain ul {position:absolute;left:0;width:82px;} 
.littleImg .slideMain ul li { margin-bottom:7px;cursor:pointer;width:76px;height:96px; padding:1px;border:1px solid #dbdbdb;} 
.littleImg .slideMain ul li.selected {border-color:#999;} 
.littleImg .slideMain ul li img {float:left;width:76px;height:96px;} 
/*放大镜end*/ 
</style> 
<!--放大镜-->
<?php $pics = @array_values(unserialize($archive[pics])); ?>
<div class="ZoomMain"> 
  <div class="zoom"> 
         <span class="move"></span> 
         <img width="415" height="526" src="{$archive[thumb]}" /> 
  </div> 
  <div class="littleImg"> 
       <!--<span class="btnL"><em></em></span> 
       <span class="btnR"><em></em></span>--> 
        <div class="slideMain"> 
              <ul class="clearfix"> 

{loop $pics $pic}
{if $pic}<li class="selected"><img src="{$pic}" medium-img="{$pic}" large-img="{$pic}" alt="{$pic}" onerror='this.src="{config::get('onerror_pic')}"' /></li>{/if}
{/loop} 

              </ul> 
        </div> 
  </div> 
  <div class="zoomDetail"> 
            <img width="415" height="526" src="{$archive[thumb]}" /> 
  </div> 
</div> 
<!--放大镜end--> 
　　
<script type="text/javascript"> 
/** 
@开发：杨永 
@功能：实现细节放大，图片对应切换，自由定义css样式实现自由铺满视口等功能 
@说明：基于jQ的放大镜插件，可根据需要自由调整布局来适应各种设计效果 
*/
(function(){ 
        function Zoom(object){ 
                this.zoomArea=$(".zoom",object);//保存促发放大效果的区域 
                this.moveArea=$(".move",object);//保存移动区域 
                this.zoomDetail=$(".zoomDetail",object);//保存放大镜区域 
                this.zoomDetailImg=$("img",this.zoomDetail);//保存放大镜里面的图 
                this.zoomAreaWidth=this.zoomArea.width(); 
                this.moveAreaWidth=this.moveArea.width(); 
                this.zoomAreaHeight=this.zoomArea.height(); 
                this.moveAreaHeight=this.moveArea.height(); 
                this.zoomDetailWidth=this.zoomDetail.width(); 
                this.zoomDetailHeight=this.zoomDetail.height(); 
                this.zoomAreaOffset=this.zoomArea.offset();//初始化放大区域在视口中的相对偏移; 
                this.XY=null;//初始化鼠标相对于放大区域的偏移偏移值 
                this.moveBili=null;// 
                var _this_=this; 
                this.zoomArea.mousemove(function(e){//当鼠标在放大区域移动的时候执行 
                                                 _this_.move(e.pageX,e.pageY);    
                                        }).mouseover(function(){ 
                                            _this_.moveArea.show(); 
                                            _this_.zoomDetail.show(); 
                                            }).mouseout(function(){ 
                                                _this_.moveArea.hide(); 
                                                _this_.zoomDetail.hide();                                                
                                                }); 
                this.calculate();//初始化并计算出需要的比例值 
                //以下是小图部分的功能实现 
                this.l=0; 
                this.scrollObj=$(".slideMain ul",object);//保存ul滚动对象 
                this.lis=this.scrollObj.children();//保存小图片列表 
                this.btnR=$(".btnR",object);//保存右边按钮 
                this.btnL=$(".btnL",object);//保存左边边按钮 
                this.lis.click(function(){ 
                                        _this_.changeImgSrc(this); 
                                        }); 
                if(this.lis.length>6){//判断图片数是否超出显示区域，是的话就注册滚动事件 
                    this.s=this.lis.length-6;//获取多余出来的图片数 
                    this.scrollObj.width(60*this.lis.length+"px");//当图片数超出默认值时，设置ul的宽度 
                    this.btnL.click(function(){_this_.scrollRight();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");}); 
                    this.btnR.click(function(){_this_.scrollLeft();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});; 
                } 
              }; 
        Zoom.prototype={ 
            scrollLeft:function(){ 
                if(Math.abs(this.l)==this.s){return}; 
                this.l--; 
                this.scrollObj.animate({left:this.l*58+"px"},"fast");    
                }, 
            scrollRight:function(){ 
                if(this.l==0){return}; 
                this.l++; 
                this.scrollObj.animate({left:this.l*58+"px"},"fast"); 
                }, 
            changeImgSrc:function(o){ 
                //改变标识样式 
                $(o).addClass("selected").siblings().removeClass("selected"); 
                this.zoomArea.find("img").attr("src",$(o).find("img").attr("medium-img")); 
                this.zoomDetailImg.attr("src",$(o).find("img").attr("medium-img")); 

                }, 
            move:function(x,y){//鼠标在放大区域移动的时候执行的函数 
                    this.XY=this.mousePosAndSetPos(x,y);//计算出鼠标相对于放大区域的x,y值 
                    //设置滑块的位置 
                    this.moveArea.css({ 
                                      left:this.XY.offsetX+"px", 
                                      top:this.XY.offsetY+"px"
                                      }); 
                    //设置大图在细节位置 
                    this.zoomDetailImg.css({ 
                                           marginLeft:-this.XY.offsetX*this.moveBili+"px", 
                                           marginTop:-this.XY.offsetY*this.moveBili+"px"
                                           }); 
                }, 
            mousePosAndSetPos:function(x,y){//实时计算并设置滑块的位置 
                x=x-this.zoomAreaOffset.left-this.moveArea.width()/2; 
                y=y-this.zoomAreaOffset.top-this.moveArea.height()/-2; 
                x=x<0?0:x; 
                y=y<0?0:y; 
                x=x>(this.zoomAreaWidth-this.moveAreaWidth)?this.zoomAreaWidth-this.moveAreaWidth:x; 
                y=y>(this.zoomAreaHeight-this.moveAreaHeight)?this.zoomAreaHeight-this.moveAreaHeight:y; 
                return { 
                        offsetX:x, 
                        offsetY:y 
                        };   
                }, 
            calculate:function(){//计算函数 
                    var widthBili,heightBili; 
                    //计算移动的滑块与放大镜铺面显示的比例宽高 
                    widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth; 
                    heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight; 
                    //把比出来的宽高 
                    this.zoomDetailImg.css({width:widthBili+"px",height:heightBili+"px"}); 
                    //返回移动的比例 
                    this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth); 
                } 
            }; 
          var zoom=new Zoom($(".ZoomMain").eq(0));     
})(); 
</script>          
          
          
          
          
          
          
          
    </div>
    
    
    
    
    
          <div class="list">
            <h1 class="title">{$archive[title]}</h1>
            <ul class="list_p">
              <div class="wz">
{$archive[my_miaoshu]}
              </div>
              <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=47356269&amp;site=qq&amp;menu=yes" class="zxdz" target="_blank"></a>
            </ul>
          </div>
        </div>
        <div class="haibao" style="padding:10px 0;"></div>
        <div class="clearboth"></div>
        <div class="p_detail">
          <ul id="product-tab" class="product-tab clearfix">
            <li class="cur">详细介绍</li>
            <div class="wz">如需帮助，请<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=47356269&amp;site=qq&amp;menu=yes" target="_blank">联系客服</a></div>
          </ul>
          <div class="content tab-content" style="display: block; text-align:center;">
          {$archive[content]}
          </div>
        </div>
      </div>
    </div>
    <div class="tuijian">
      <h2>热门推荐</h2>
      <div class="cp-roll"><img class="l_btn2" src="http://www.wsmfz.com/template/default/images/left02.png"> <img class="r_btn2" src="http://www.wsmfz.com/template/default/images/right02.png"> 
        
        <!-- 滚动开始 -->
        <div id="m_demo">
          <div id="m_indemo" style="width: 3964px;">
            <div id="m_demo1">
              <ul class="product_list2 roll_product clearfix">
                <li> <a href="#/630.html" title="卫衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20190626104051_629.jpg" alt="卫衣定做"></a> </li>
                <li> <a href="#/720.html" title="加绒连帽套头卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191010163635_527.jpg" alt="加绒连帽套头卫衣"></a> </li>
                <li> <a href="#/721.html" title="插肩袖连帽卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191010164407_539.jpg" alt="插肩袖连帽卫衣"></a> </li>
                <li> <a href="#/728.html" title="新款冲锋衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191014142700_171.jpg" alt="新款冲锋衣"></a> </li>
                <li> <a href="#/733.html" title="套头卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191014151853_820.jpg" alt="套头卫衣"></a> </li>
                <li> <a href="#/740.html" title="广告风衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191016102628_932.jpg" alt="广告风衣定做"></a> </li>
                <li> <a href="#/741.html" title="三合一冲锋衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191016104310_627.jpg" alt="三合一冲锋衣"></a> </li>
                <li> <a href="#/793.html" title="户外冲锋衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191104112145_614.jpg" alt="户外冲锋衣定做"></a> </li>
              </ul>
            </div>
            <div id="m_demo2">
              <ul class="product_list2 roll_product clearfix">
                <li> <a href="#/630.html" title="卫衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20190626104051_629.jpg" alt="卫衣定做"></a> </li>
                <li> <a href="#/720.html" title="加绒连帽套头卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191010163635_527.jpg" alt="加绒连帽套头卫衣"></a> </li>
                <li> <a href="#/721.html" title="插肩袖连帽卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191010164407_539.jpg" alt="插肩袖连帽卫衣"></a> </li>
                <li> <a href="#/728.html" title="新款冲锋衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191014142700_171.jpg" alt="新款冲锋衣"></a> </li>
                <li> <a href="#/733.html" title="套头卫衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191014151853_820.jpg" alt="套头卫衣"></a> </li>
                <li> <a href="#/740.html" title="广告风衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191016102628_932.jpg" alt="广告风衣定做"></a> </li>
                <li> <a href="#/741.html" title="三合一冲锋衣" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191016104310_627.jpg" alt="三合一冲锋衣"></a> </li>
                <li> <a href="#/793.html" title="户外冲锋衣定做" class="img"><img src="http://www.wsmfz.com/data/images/product/thumb_20191104112145_614.jpg" alt="户外冲锋衣定做"></a> </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 滚动结束 --> 
      </div>
    </div>
  </div>
</div>


{template 'footer.html'}