765 lines
27 KiB
Plaintext
Executable File
765 lines
27 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<!--#include file="include/head.html" -->
|
||
<!-- <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script> -->
|
||
<script type="text/javascript" src="scripts/jquery.jqzoom.js"></script>
|
||
<script type="text/javascript" src="scripts/base.js"></script>
|
||
<script type="text/javascript">
|
||
var navID = "1";
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!--top-->
|
||
<!--#include file="include/top.html" -->
|
||
<!--top End-->
|
||
|
||
<div class="indexbox4 cpmbox">
|
||
<div class="w1440">
|
||
<!-- 产品 s -->
|
||
<div class="cp outBox">
|
||
<div class="cpfl">
|
||
<!--preview start-->
|
||
<div class="preview">
|
||
<div class="smallImg">
|
||
<div class="scrollbutton smallImgUp disabled"></div>
|
||
<div id="imageMenu">
|
||
<ul>
|
||
<li id="onlickImg"><img src="uploadfiles/image/cp1.jpg" width="68" height="68" alt="洋妞"/></li>
|
||
<li><img src="uploadfiles/image/cp2.jpg" alt=""/></li>
|
||
<li><img src="uploadfiles/image/cp3.jpg" alt=""/></li>
|
||
<li><img src="uploadfiles/image/cp4.jpg" alt=""/></li>
|
||
<li><img src="uploadfiles/image/cp5.jpg" alt=""/></li>
|
||
<li><img src="uploadfiles/image/cp1.jpg" alt=""/></li>
|
||
<li><img src="uploadfiles/image/cp2.jpg" alt=""/></li>
|
||
</ul>
|
||
</div>
|
||
<div class="scrollbutton smallImgDown"></div>
|
||
</div>
|
||
<!--smallImg end-->
|
||
<div id="vertical" class="bigImg">
|
||
<img src="uploadfiles/image/cp.jpg" width="442" height="535" alt="" id="midimg" />
|
||
<div style="display:none;" id="winSelector"></div>
|
||
</div>
|
||
<!--bigImg end-->
|
||
<div id="bigView" style="display:none;">
|
||
<img width="800" height="800" alt="" src="" />
|
||
</div>
|
||
</div>
|
||
<!--preview end-->
|
||
|
||
<!-- phone s-->
|
||
<div class="swiper-container banners">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide"><a href=""><img src="uploadfiles/image/cp.jpg"></a></div>
|
||
<div class="swiper-slide"><a href=""><img src="uploadfiles/image/cp.jpg"></a></div>
|
||
<div class="swiper-slide"><a href=""><img src="uploadfiles/image/cp.jpg"></a></div>
|
||
</div>
|
||
<!-- Add Pagination -->
|
||
<div class="swiper-pagination bandot"></div>
|
||
</div>
|
||
|
||
<!-- 视频播放 s -->
|
||
<div class="play">
|
||
<a href="javascript:;" class="pcha"><img src="images/images/cha1.png"></a>
|
||
<div class="moimg"><img src="images/images/mo.jpg"></div>
|
||
</div>
|
||
<div class="plbtn"><a href="javascript:;"><img src="images/images/play.png"></a></div>
|
||
<!-- 视频播放 e -->
|
||
|
||
|
||
<script>
|
||
var swiper = new Swiper('.banners', {
|
||
loop: true,
|
||
autoplay:true,
|
||
pagination:{
|
||
el: '.bandot',
|
||
},
|
||
});
|
||
$(function(){
|
||
$(".plbtn").click(function(){
|
||
$(".play").show();
|
||
})
|
||
$(".pcha").click(function(){
|
||
$(".play").hide();
|
||
})
|
||
})
|
||
</script>
|
||
<!-- phone e -->
|
||
</div>
|
||
<div class="cprh">
|
||
<div class="cpcon">
|
||
<p class="ctit1">ORICO <span>L12000</span> Scharge聚合物移动电源</p>
|
||
<p class="ctit2">2000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<ul class="cpul">
|
||
<li><i></i>ABS （边框亮面，表面纹面处理）</li>
|
||
<li><i></i>12000mAh轻巧大容量</li>
|
||
<li><i></i>A+级聚合物电芯，为了安全</li>
|
||
<li><i></i>柔光小夜灯，让夜晚尽在“掌握</li>
|
||
</ul>
|
||
<div class="hd">
|
||
<ul>
|
||
<li class="on"><a href="#"></a></li>
|
||
<li><a href="#"></a></li>
|
||
</ul>
|
||
<span>颜色</span>
|
||
</div>
|
||
<div class="buy">
|
||
<a href="#">购买天猫</a>
|
||
<a href="#">购买京东</a>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<script type="text/javascript">
|
||
// jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd"});
|
||
// jQuery(".outBox").slide({trigger:"click"});
|
||
// $(document).ready(function(){
|
||
// $('#example1').sliderPro({
|
||
// width: 442,
|
||
// height: 520,
|
||
// orientation: 'vertical',
|
||
// autoplay:false,
|
||
// loop: false,
|
||
// arrows: true,
|
||
// buttons: false,
|
||
// thumbnailsPosition: 'right',
|
||
// thumbnailPointer: true,
|
||
// thumbnailWidth: 80,
|
||
// thumbnailHeight:100,
|
||
// breakpoints:{
|
||
// 800: {
|
||
|
||
// },
|
||
// 500: {
|
||
|
||
// },
|
||
// 320: {
|
||
// width:300,
|
||
// height:320,
|
||
// }
|
||
// }
|
||
// });
|
||
// });
|
||
</script>
|
||
</div>
|
||
<!-- 产品 e -->
|
||
</div>
|
||
</div>
|
||
<div class="warp">
|
||
<div class="warpa">
|
||
<!-- 锚链接 s -->
|
||
<ul class="w1440 cpa">
|
||
<li><a href="#link1">亮点</a></li>
|
||
<li><a href="#link2">相关</a></li>
|
||
<li><a href="#link3">评论</a></li>
|
||
<li><a href="#link4">规格</a></li>
|
||
<li><a href="#link5">下载</a></li>
|
||
<li><a href="#link6">常见问题</a></li>
|
||
<div class="clear"></div>
|
||
</ul>
|
||
<!-- 锚链接 e -->
|
||
</div>
|
||
|
||
<!-- 亮点 s-->
|
||
<div class="warp1 proTfg">
|
||
<div class="w1440">
|
||
<div class="light">
|
||
<div class="lgtit" id="link1">亮点</div>
|
||
<div class="lgimg"><img src="uploadfiles/image/pban.jpg"></div>
|
||
<div class="lgfl"><img src="uploadfiles/image/pin1.jpg"></div>
|
||
<div class="lgrh">
|
||
<p class="lgtext">ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p>12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
<p>12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 </p>
|
||
<ul class="lgul">
|
||
<li><i></i>卖点一卖点一卖点一卖点一卖点一卖点一卖点一</li>
|
||
<li><i></i>卖点二卖点二卖点二卖点二卖点二卖点二卖点二卖点二</li>
|
||
<li><i></i>卖点三卖点三卖点三卖点三卖点三卖点三卖点三卖点三卖点三卖点三</li>
|
||
</ul>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<ul class="cplist">
|
||
<li>
|
||
<img src="uploadfiles/image/pin2.jpg">
|
||
<p class="lg1">ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="lg2">12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 </p>
|
||
</li>
|
||
<li>
|
||
<img src="uploadfiles/image/pin3.jpg">
|
||
<p class="lg1">ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="lg2">12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 </p>
|
||
</li>
|
||
<div class="clear"></div>
|
||
</ul>
|
||
<ul class="msul">
|
||
<div class="mstit">产品描述</div>
|
||
<li>
|
||
<p class="ms1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="ms2">ORICO L12000 Scharge聚合物移动电源</p>
|
||
</li>
|
||
<li>
|
||
<p class="ms1">产品材质: ABS （边框亮面，表面纹面处理</p>
|
||
<p class="ms2">型号：ORICO L12000</p>
|
||
</li>
|
||
<li>
|
||
<p class="ms1">产品颜色: </p>
|
||
<p class="ms2">白</p>
|
||
</li>
|
||
<li>
|
||
<p class="ms1">产品容量: </p>
|
||
<p class="ms2">12000mAh</p>
|
||
</li>
|
||
<li>
|
||
<p class="ms1">产品电芯:</p>
|
||
<p class="ms2">聚合物</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 亮点 e-->
|
||
</div>
|
||
</div>
|
||
<!-- 亮点 e-->
|
||
|
||
<!-- 关联产品 s -->
|
||
<div class="warp2 proTfg"">
|
||
<div class="w1440">
|
||
<div class="gltit" id="link2">关联产品</div>
|
||
<div class="cpBox">
|
||
<div class="owl-carousel">
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp1.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">安卓充电数据线</p>
|
||
<p class="gl2">ORICO BTM-10</p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp2.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">新国标桌面智能排插</p>
|
||
<p class="gl2">ORICO EPC-2A3U</p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp3.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">QC3.0车载充电器</p>
|
||
<p class="gl2">ORICO UCH-Q3</p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp4.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">迷你口袋蓝牙音箱</p>
|
||
<p class="gl2">ORICO BS16 </p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp1.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">QC3.0车载充电器</p>
|
||
<p class="gl2">ORICO UCH-Q3</p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
<div class="item wow">
|
||
<a href="#">
|
||
<div class="glimg"><img src="uploadfiles/image/sp2.png"></div>
|
||
<div class="gltext">
|
||
<p class="gl1">迷你口袋蓝牙音箱</p>
|
||
<p class="gl2">ORICO BS16 </p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var owl = $(".cpBox .owl-carousel");
|
||
owl.owlCarousel({
|
||
autoplay:true,
|
||
navigationText: ["",""],
|
||
responsive:{
|
||
0:{
|
||
items:1,
|
||
margin:0
|
||
},
|
||
640:{
|
||
items:2,
|
||
margin:0,
|
||
smartSpeed:80,
|
||
dots:false
|
||
},
|
||
998:{
|
||
items:4,
|
||
margin:0,
|
||
smartSpeed:80,
|
||
dots:false
|
||
},
|
||
|
||
},
|
||
})
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 关联产品 e -->
|
||
|
||
<!-- 评论 s -->
|
||
<div class="nybox proTfg">
|
||
<div class="w1440">
|
||
<div class="pltitle">
|
||
<p class="pltit" id="link3">评论</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
</p>
|
||
<p class="pltit1">128条评论</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<div class="plcon">
|
||
<p class="py1">标题：ORICO L12000 Scharge聚合物移动电源</p>
|
||
<p class="plimg">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x1.png">
|
||
<img src="images/x2.png">
|
||
<span>4</span>
|
||
</p>
|
||
<p class="py2">2018-08-28</p>
|
||
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
|
||
</div>
|
||
<!-- 分页 s -->
|
||
<div class="Pages" style="margin-top:20px;">
|
||
<span class="p_page">
|
||
<a href="javascript:void(0);" class="a_prev"></a>
|
||
<em class="num">
|
||
<a href="#" class="a_cur">1</a>
|
||
<a href="#">2</a>
|
||
<a href="#">3</a>
|
||
<a href="#">4</a>
|
||
<a href="#">5</a>
|
||
<span>...</span>
|
||
<a href="#">126</a>
|
||
</em>
|
||
<a href="javascript:void(0);" class="a_next"></a>
|
||
</span>
|
||
</div>
|
||
<!-- 分页 e -->
|
||
</div>
|
||
</div>
|
||
<!-- 评论 e -->
|
||
|
||
<!-- 规格参数 s -->
|
||
<div class="nybox proTfg">
|
||
<div class="w1440">
|
||
<div class="sptit" id="link4">规格参数</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品容量</p>
|
||
<p class="sp2">12000mAh</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品重量</p>
|
||
<p class="sp2">0.22 KG</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品颜色:</p>
|
||
<p class="sp2">白</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品电芯</p>
|
||
<p class="sp2">聚合物</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品输入</p>
|
||
<p class="sp2">Micro USB(5V2A</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品输出</p>
|
||
<p class="sp2">USB-A(5V2A)*1 + USB-A（5V1A）*</p>
|
||
</div>
|
||
<div class="splist">
|
||
<p class="sp1">产品尺寸</p>
|
||
<p class="sp2">132*71*21mm</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 规格参数 e -->
|
||
|
||
<!-- 相关下载 s -->
|
||
<div class="nybox proTfg">
|
||
<div class="w1440">
|
||
<div class="sptit" id="link5">相关下载</div>
|
||
<div class="xz">
|
||
<p class="xztit">驱动下载</p>
|
||
<p class="xz1"><a href="#"><i></i>Win 7/Vista</a></p>
|
||
<p class="xz1"><a href="#"><i></i>Win 8.1</a></p>
|
||
<p class="xz1"><a href="#"><i></i>Windows XP</a></p>
|
||
</div>
|
||
<div class="xz">
|
||
<p class="xztit">其他下载</p>
|
||
<p class="xz1"><a href="#"><i></i>手册</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 相关下载 e -->
|
||
|
||
<!-- 常见问题 s -->
|
||
<div class="nybox proTfg">
|
||
<div class="w1440">
|
||
<div class="sptit" id="link6">常见问题</div>
|
||
<div class="ans" style="display:block;">
|
||
<div class="antit">
|
||
<i></i>哪些设备与L12000便携式充电器兼容？
|
||
</div>
|
||
<div class="anbox">
|
||
<p>aaaL12000与Android，Apple和几乎所有其他通过USB充电的设备兼容。（请注意：如果设备的输入电流要求高于2.4A，它可能会慢慢充电或根本不充电。）</p>
|
||
</div>
|
||
</div>
|
||
<div class="ans">
|
||
<div class="antit">
|
||
<i></i>便携式充电器需要多长时间才能充满电？
|
||
</div>
|
||
<div class="anbox">
|
||
<p>bbbL12000与Android，Apple和几乎所有其他通过USB充电的设备兼容。（请注意：如果设备的输入电流要求高于2.4A，它可能会慢慢充电或根本不充电。）</p>
|
||
</div>
|
||
</div>
|
||
<div class="ans">
|
||
<div class="antit">
|
||
<i></i>便携式充电器可以在充电时为其他设备充电吗？
|
||
</div>
|
||
<div class="anbox">
|
||
<p>cccL12000与Android，Apple和几乎所有其他通过USB充电的设备兼容。（请注意：如果设备的输入电流要求高于2.4A，它可能会慢慢充电或根本不充电。）</p>
|
||
</div>
|
||
</div>
|
||
<div class="ans">
|
||
<div class="antit">
|
||
<i></i>我的设备充电电流为1安培，L12000便携式充电器的2.4安培输出会对它造成伤害吗？
|
||
</div>
|
||
<div class="anbox">
|
||
<p>dddL12000与Android，Apple和几乎所有其他通过USB充电的设备兼容。（请注意：如果设备的输入电流要求高于2.4A，它可能会慢慢充电或根本不充电。）</p>
|
||
</div>
|
||
</div>
|
||
<div class="ans">
|
||
<div class="antit">
|
||
<i></i>哪些设备与L12000便携式充电器兼容？
|
||
</div>
|
||
<div class="anbox">
|
||
<p>eeeL12000与Android，Apple和几乎所有其他通过USB充电的设备兼容。（请注意：如果设备的输入电流要求高于2.4A，它可能会慢慢充电或根本不充电。）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 常见问题 e -->
|
||
<script type="text/javascript">
|
||
$(function(){
|
||
var $category=$(".ans .anbox");
|
||
$category.hide();
|
||
$(".ans .antit").click(function(){
|
||
if($(this).next(".anbox").is(":visible")){
|
||
$(this).removeClass('on').next().slideUp(800);
|
||
$(this).parent('.ans').removeClass('on');
|
||
$(this).children("i").removeClass("ons")
|
||
}else{
|
||
$category.hide();
|
||
$(".ans .antit").removeClass('on');
|
||
$(this).children("i").addClass("ons")
|
||
$(this).addClass('on').next().slideDown(800);
|
||
$(this).parent('.ans').addClass('on');
|
||
|
||
}
|
||
});
|
||
});
|
||
|
||
$(function(){
|
||
$('a[href*=#],area[href*=#]').click(function() {
|
||
console.log(this.pathname)
|
||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||
var $target = $(this.hash);
|
||
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
|
||
if ($target.length) {
|
||
var targetOffset = $target.offset().top-50;
|
||
$('html,body').animate({
|
||
scrollTop: targetOffset
|
||
},800);
|
||
return false; //页面锚点跳转动画 后面的800是锚点跳转的时间 800ms
|
||
}
|
||
}
|
||
});
|
||
})
|
||
$(document).ready(function(){
|
||
//获取div-one距离顶部的距离
|
||
var navtop=$(".warpa").offset().top;
|
||
$(document).scroll(function(){
|
||
//获取滚动条滚动的高度
|
||
var scroltop=$(document).scrollTop();
|
||
if (scroltop > navtop){
|
||
$(".warpa").css({
|
||
"position":"fixed",
|
||
"top":"0px",
|
||
"left":"0px",
|
||
"right":"0px",
|
||
"z-index":"999"
|
||
})
|
||
}else {
|
||
$(".warpa").css({
|
||
"position":"",
|
||
"top":"",
|
||
"left":"",
|
||
"right":"",
|
||
"z-index":""
|
||
})
|
||
}
|
||
})
|
||
})
|
||
|
||
$(function(){
|
||
$(window).scroll(function(){
|
||
var arr=[]
|
||
$.each($(".proTfg"),function(k,v){
|
||
arr[k]=$(this).offset().top+$(this).height();
|
||
})
|
||
$.each(arr,function(k,v){
|
||
if(($(window).scrollTop()+$(".cpa li").eq(k-1).height()+0)<v){
|
||
if(!$(".cpa li").eq(k).hasClass("current")){
|
||
$(".cpa li").eq(k).attr("class","current").siblings().removeClass();
|
||
}
|
||
return false;
|
||
}
|
||
})
|
||
})
|
||
})
|
||
</script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
// 图片上下滚动
|
||
var count = $("#imageMenu li").length - 6; /* 显示 6 个 li标签内容 */
|
||
var interval = $("#imageMenu li:first").width();
|
||
var curIndex = 0;
|
||
|
||
$('.scrollbutton').click(function(){
|
||
if( $(this).hasClass('disabled')) return false;
|
||
|
||
if ($(this).hasClass('smallImgUp')) --curIndex;
|
||
else ++curIndex;
|
||
|
||
$('.scrollbutton').removeClass('disabled');
|
||
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
|
||
if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
|
||
|
||
$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
|
||
});
|
||
// 解决 ie6 select框 问题
|
||
$.fn.decorateIframe = function(options) {
|
||
if ($.browser.msie && $.browser.version < 7) {
|
||
var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
|
||
$(this).each(function() {
|
||
var $myThis = $(this);
|
||
//创建一个IFRAME
|
||
var divIframe = $("<iframe />");
|
||
divIframe.attr("id", opts.iframeId);
|
||
divIframe.css("position", "absolute");
|
||
divIframe.css("display", "none");
|
||
divIframe.css("display", "block");
|
||
divIframe.css("z-index", opts.iframeZIndex);
|
||
divIframe.css("border");
|
||
divIframe.css("top", "0");
|
||
divIframe.css("left", "0");
|
||
if (opts.width == 0) {
|
||
divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
|
||
}
|
||
if (opts.height == 0) {
|
||
divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
|
||
}
|
||
divIframe.css("filter", "mask(color=#fff)");
|
||
$myThis.append(divIframe);
|
||
});
|
||
}
|
||
}
|
||
$.fn.decorateIframe.defaults = {
|
||
iframeId: "decorateIframe1",
|
||
iframeZIndex: -1,
|
||
width: 0,
|
||
height: 0
|
||
}
|
||
//放大镜视窗
|
||
$("#bigView").decorateIframe();
|
||
//点击到中图
|
||
var midChangeHandler = null;
|
||
|
||
$("#imageMenu li img").bind("click", function(){
|
||
if ($(this).attr("id") != "onlickImg") {
|
||
midChange($(this).attr("src").replace("small", "mid"));
|
||
$("#imageMenu li").removeAttr("id");
|
||
$(this).parent().attr("id", "onlickImg");
|
||
}
|
||
}).bind("mouseover", function(){
|
||
if ($(this).attr("id") != "onlickImg") {
|
||
window.clearTimeout(midChangeHandler);
|
||
midChange($(this).attr("src").replace("small", "mid"));
|
||
// $(this).css({ "border": "3px solid #959595" });
|
||
}
|
||
}).bind("mouseout", function(){
|
||
if($(this).attr("id") != "onlickImg"){
|
||
$(this).removeAttr("style");
|
||
midChangeHandler = window.setTimeout(function(){
|
||
midChange($("#onlickImg img").attr("src").replace("small", "mid"));
|
||
}, 1000);
|
||
}
|
||
});
|
||
function midChange(src) {
|
||
$("#midimg").attr("src", src).load(function() {
|
||
changeViewImg();
|
||
});
|
||
}
|
||
//大视窗看图
|
||
function mouseover(e) {
|
||
if ($("#winSelector").css("display") == "none") {
|
||
$("#winSelector,#bigView").show();
|
||
}
|
||
$("#winSelector").css(fixedPosition(e));
|
||
e.stopPropagation();
|
||
}
|
||
function mouseOut(e) {
|
||
if ($("#winSelector").css("display") != "none") {
|
||
$("#winSelector,#bigView").hide();
|
||
}
|
||
e.stopPropagation();
|
||
}
|
||
$("#midimg").mouseover(mouseover); //中图事件
|
||
$("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
|
||
|
||
var $divWidth = $("#winSelector").width(); //选择器宽度
|
||
var $divHeight = $("#winSelector").height(); //选择器高度
|
||
var $imgWidth = $("#midimg").width(); //中图宽度
|
||
var $imgHeight = $("#midimg").height(); //中图高度
|
||
var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
|
||
|
||
function changeViewImg() {
|
||
$("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
|
||
}
|
||
changeViewImg();
|
||
$("#bigView").scrollLeft(0).scrollTop(0);
|
||
function fixedPosition(e) {
|
||
if (e == null) {
|
||
return;
|
||
}
|
||
var $imgLeft = $("#midimg").offset().left; //中图左边距
|
||
var $imgTop = $("#midimg").offset().top; //中图上边距
|
||
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
|
||
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
|
||
X = X < 0 ? 0 : X;
|
||
Y = Y < 0 ? 0 : Y;
|
||
|
||
X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
|
||
Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
|
||
|
||
if ($viewImgWidth == null) {
|
||
$viewImgWidth = $("#bigView img").outerWidth();
|
||
$viewImgHeight = $("#bigView img").height();
|
||
if ($viewImgWidth < 200 || $viewImgHeight < 200) {
|
||
$viewImgWidth = $viewImgHeight = 800;
|
||
}
|
||
$height = $divHeight * $viewImgHeight / $imgHeight;
|
||
$("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
|
||
$("#bigView").height($height);
|
||
}
|
||
var scrollX = X * $viewImgWidth / $imgWidth;
|
||
var scrollY = Y * $viewImgHeight / $imgHeight;
|
||
$("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
|
||
$("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });
|
||
|
||
return { left: X, top: Y };
|
||
}
|
||
});
|
||
</script>
|
||
</div>
|
||
<!-- bottom s -->
|
||
<!--#include file="include/bottom.html" -->
|
||
<!-- bottom e -->
|
||
</body>
|
||
</html>
|