html5网页视差效果鞋子的故事源码下载



87 346 116



特效描述:html5 网页视差效果 鞋子的故事源码,视差效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link href="css/c.css" rel="stylesheet" type="text/css">

2. 引入JS

<script async src="css/analytics.js"></script>
<script src="css/modernizr-2.5.0.min.js"></script>
<script charset="utf-8" src="css/shorten.json"></script>
<script src="css/jquery-1.7.2.min.js"></script>
<script src="css/jquery-ui.min.js"></script>
<script src="css/plugins.js"></script>
<script src="css/script.js"></script>
<script src="css/util.js"></script>
<script src="css/ga.js"></script>

3. HTML代码

<!--<![endif]-->
<!--[if lt IE 7]><h1>你的浏览器不支持HTML5和CSS3技术。</h1> <p><a href="http://browsehappy.com/">请时候现代浏览器</a>, <a href="http://www.google.com/chromeframe/?redirect=true">使用谷歌浏览器能让你获得最佳体验!</p><![endif]-->
<!-- Start Screen -->
<div id="startScreen" style="height: 910px;">
  <div id="topNav">
    <div class="wrap"> <a href="#" target="_blank">
      <div class="logo"></div>
      </a>
      <h1 class="ha1"></h1>
    </div>
  </div>
  <div id="startBtn" class="offscreen" style="display: block;">
    <button type="button" class="btnScrollStart" id="startAnimationBtn"><img src="css/arrow-start.png" alt="start"></button>
  </div>
  <div class="zebra">
    <div id="startScreenWrap" style="display: block; left: 441.5px; top: 130px;">
      <h1>网页视差精品案例<br>
        鞋子的故事</h1>
      <h2>So much<br>
        technology.<br>
        so little<br>
        shoe.</h2>
      <p></p>
      <div class="shoeSplash"> <img src="css/homescreen-shoes.png" alt="Mens and Womens Kinvara 3 Shoes" class="shoes"> </div>
    </div>
  </div>
</div>
<!-- End Start Screen -->
<div id="contentWrap" style="display: block;">
  <nav id="global_nav" class="offscreen">
    <ul>
      <li id="nav_flexfilm"><a href="#misc/kinvara3/#flexfilm" class="current">FlexFILM</a></li>
      <li id="nav_upper"><a href="#misc/kinvara3/#upper" class="">Upper</a></li>
      <li id="nav_progrid"><a href="#misc/kinvara3/#progrid" class="">Progrid</a></li>
      <li id="nav_midsole"><a href="#misc/kinvara3/#midsole" class="">Midsole</a></li>
      <li id="nav_sole"><a href="#misc/kinvara3/#sole" class="">Sole</a></li>
      <li id="nav_colors"><a href="#misc/kinvara3/#colors" class="">Colors</a></li>
      <li id="nav_getyours"><a href="#misc/kinvara3/#getyours">Get YOURS</a></li>
    </ul>
  </nav>
  <section id="flexfilm" style="height: 910px; width: 1903px;"> <a name="flexfilm"></a>
    <div class="downBtn">
      <button type="button" class="btnScrollVert" id="downBtnFlexfilm">
      <div class="arrow"></div>
      </button>
    </div>
    <div class="persp_background" id="flexfilm-bg" style="top: -295px; left: -98.5px;"></div>
    <div class="line line1" style="top: 716.686192468619px; left: 216.431949553337px;"></div>
    <div class="line line2" style="top: 573.84309623431px; left: 342.502364687336px;"></div>
    <div class="line line3" style="top: 525.874476987448px; left: 396.859169732002px;"></div>
    <div class="line line4" style="top: 496.905857740586px; left: 451.215974776668px;"></div>
    <div class="line line5" style="top: 477.937238493724px; left: 486.572779821335px;"></div>
    <div class="line line6" style="top: -0.0313807531380759px; left: 7.92958486600105px;"></div>
    <h1 style="top: 90.9px; left: 90.9px;">柔软舒适 <span>紧凑密致</span></h1>
    <div class="shoe_part" id="shoe-build-flexfilm-back" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-1b.png"></div>
    <div class="shoe_part" id="shoe-build-flexfilm-front" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-1f.png"></div>
    <div class="shoe_shadow" id="flexfilm-shoe-shadow" style="top: 649px; left: 401.5px;"></div>
    <!-- Flexfilm Pop-outs -->
    <div class="pop_out" id="flex_pop1" style="top: 441px; left: 661.5px; display: none; opacity: 1; z-index: 10000;">
      <div class="pop_out_text" style="opacity: 0;">
        <div style="opacity: 0;">
          <p>Taken from the Saucony racing line, FlexFilm reduces the number of layers in the upper for seamless flexibility.</p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="pop_out" id="flex_pop2" style="top: 391px; left: 876.5px; display: none; opacity: 1; z-index: 10000;">
      <div class="pop_out_text" style="opacity: 0;">
        <div style="opacity: 0;">
          <p>The process of heat-bonding FlexFilm directly to the mesh creates a strong pliable upper that adapts to your foot.</p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="vidWrap" id="video_flexfilm_1" style="left: 52.9295848660011px; top: 293.811715481172px; opacity: 1;"> <a href="#misc/kinvara3/#" class="colorboxVideo cboxElement" title="FLEXFILM OVERVIEW">
      <div class="videoBtn" id="video_overview_btn"></div>
      <div class="videoBtnHover" id="video_overview_btn_hover"></div>
      </a> </div>
    <div class="videoLbl" id="video_lbl_flexfilm_1" style="left: 123.215974776668px; top: 393.686192468619px; opacity: 1;"> <a href="#misc/kinvara3/#" class="colorboxVideo cboxElement" title="FLEXFILM OVERVIEW">
      <h2>FLEXFILM OVERVIEW</h2>
      </a> </div>
    <div class="detailWrap" id="detail_flexfilm_1" style="top: 333.811715481172px; opacity: 1; left: 1657.929584866px;"> <a href="#misc/kinvara3/img/k3_lb_1.2.jpg" class="colorboxImage cboxElement" title="FLEXFILM DETAIL">
      <div class="detailBtn" id="detail_flexfilm_btn" style="opacity: 1;"></div>
      <div class="detailBtnHover" id="detail_flexfilm_btn_hover" style="opacity: 0;"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_flexfilm_1" style="top: 462.686192468619px; opacity: 1; left: 1591.21597477667px;"> <a href="#misc/kinvara3/img/k3_lb_1.2.jpg" class="colorboxImage cboxElement" title="FLEXFILM DETAIL">
      <h2>FLEXFILM DETAIL</h2>
      </a> </div>
    <div class="detailWrap" id="detail_flexfilm_2" style="opacity: 1; top: 570.811715481172px; left: 1210.929584866px;"> <a href="#misc/kinvara3/img/k3_lb_1.3.jpg" class="colorboxImage cboxElement" title="EARLY DESIGN SKETCHES">
      <div class="detailBtn" id="detail_flexfilm_2_btn" style="opacity: 1;"></div>
      <div class="detailBtnHover" id="detail_flexfilm_2_btn_hover" style="opacity: 0;"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_flexfilm_2" style="opacity: 1; top: 610.686192468619px; left: 1180.21597477667px;"> <a href="#misc/kinvara3/img/k3_lb_1.3.jpg" class="colorboxImage cboxElement" title="EARLY DESIGN SKETCHES">
      <h2>EARLY DESIGN SKETCHES</h2>
      </a> </div>
    <div class="quote quote1_1" id="quote_flexfilm_1" style="left: 613.431949553337px; opacity: 0.8; top: 570.560669456067px;">
      <p>“We aimed to compliment<br>
        the natural human stride”</p>
    </div>
    <div class="quote quote1_2" id="quote_flexfilm_2" style="top: 313.84309623431px; opacity: 0.45; left: 1002.859169732px;">
      <p>“The Kinvara 3 is engineered to stay out of<br>
        the way of the runner.”</p>
      <span>Spencer White, Saucony Human<br>
      Performance and Innovation Lab<span> </span></span></div>
  </section>
  <section id="upper" style="height: 910px; width: 1903px;"> <a name="upper"></a>
    <div class="downBtn">
      <button type="button" class="btnScrollVert" id="downBtnUpper">
      <div class="arrow"></div>
      </button>
    </div>
    <div class="persp_background" id="upper-bg" style="top: -295px; left: -98.5px;"></div>
    <div class="line line1" style="top: 716.686192468619px; left: 216.431949553337px;"></div>
    <div class="line line2" style="top: 573.84309623431px; left: 342.502364687336px;"></div>
    <div class="line line3" style="top: 525.874476987448px; left: 396.859169732002px;"></div>
    <div class="line line4" style="top: 496.905857740586px; left: 451.215974776668px;"></div>
    <div class="line line5" style="top: 477.937238493724px; left: 486.572779821335px;"></div>
    <div class="line line6" style="top: -0.0313807531380759px; left: 7.92958486600105px;"></div>
    <h1 style="top: 90.9px; left: 90.9px;">贴身呵护<span>完美享受</span></h1>
    <div class="shoe_part" id="shoe-build-upper-back" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-2b.png"></div>
    <div class="shoe_part" id="shoe-build-upper-front" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-2f.png"></div>
    <div class="shoe_shadow" id="upper-shoe-shadow" style="top: 649px; left: 401.5px;"></div>
    <!-- Upper Pop-outs -->
    <div class="pop_out" id="upper_pop1" style="top: 451px; left: 711.5px; display: none; opacity: 1;">
      <div class="pop_out_text">
        <div>
          <p>Anatomically contoured memory foam heel pods provide a secure fit. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="pop_out" id="upper_pop2" style="top: 516px; left: 1146.5px; display: none; opacity: 1;">
      <div class="pop_out_text">
        <div>
          <p>Toe cap construction provides unrestricted movement.</p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="vidWrap" id="video_upper_1" style="top: 373.811715481172px; opacity: 1; left: 1320.929584866px;"> <a href="#misc/kinvara3/#" class="colorboxVideo cboxElement" title="DESIGN PHILOSOPHY">
      <div class="videoBtn" id="video_philosophy_btn"></div>
      <div class="videoBtnHover" id="video_philosophy_btn_hover"></div>
      </a> </div>
    <div class="videoLbl" id="video_lbl_upper_1" style="top: 403.686192468619px; opacity: 1; left: 1270.21597477667px;"> <a href="#misc/kinvara3/#" class="colorboxVideo cboxElement" title="DESIGN PHILOSOPHY">
      <h2>DESIGN PHILOSOPHY</h2>
      </a> </div>
    <div class="detailWrap" id="detail_upper_1" style="left: 57.9295848660011px; top: 323.811715481172px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_2.3.jpg" class="colorboxImage cboxElement" title="BIRDS-EYE VIEW">
      <div class="detailBtn" id="detail_upper_1_btn"></div>
      <div class="detailBtnHover" id="detail_upper_1_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_upper_1" style="left: 93.2159747766684px; top: 453.686192468619px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_2.3.jpg" class="colorboxImage cboxElement" title="BIRDS-EYE VIEW">
      <h2>BIRDS-EYE VIEW</h2>
      </a> </div>
    <div class="detailWrap" id="detail_upper_2" style="left: 157.929584866001px; top: 563.811715481172px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_2.2.jpg" class="colorboxImage cboxElement" title="INTERIM DESIGN SKETCHES">
      <div class="detailBtn" id="detail_upper_2_btn"></div>
      <div class="detailBtnHover" id="detail_upper_2_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_upper_2" style="left: 193.215974776668px; top: 613.686192468619px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_2.2.jpg" class="colorboxImage cboxElement" title="INTERIM DESIGN SKETCHES">
      <h2>INTERIM DESIGN SKETCHES</h2>
      </a> </div>
    <div class="quote quote2_1" id="quote_upper_1" style="top: 593.717573221757px; left: 848.14555964267px; opacity: 0.6;">
      <p>“Sockless runners will be<br>
        happy with the Kinvara 3s<br>
        fewer seams”</p>
    </div>
    <div class="quote quote2_2" id="quote_upper_2" style="top: 303.905857740586px; opacity: 0.8; z-index: 1500; left: 1037.57277982133px;">
      <p>“Kinvara 3 is minimal in its layers<br>
        and overall philosophy.”</p>
      <span>Chris Mahoney<br>
      Saucony Footwear Team</span> </div>
    <div class="keyword keyword2_1" id="keyword_upper_1" style="left: 1053.43194955334px; opacity: 1; top: 588.84309623431px;"><span>7.7</span>oz</div>
  </section>
  <section id="progrid" style="height: 910px; width: 1903px;"> <a name="progrid"></a>
    <div class="downBtn">
      <button type="button" class="btnScrollVert" id="downBtnProgrid">
      <div class="arrow"></div>
      </button>
    </div>
    <div class="persp_background" id="progrid-bg" style="top: -295px; left: -98.5px;"></div>
    <div class="line line1" style="top: 716.686192468619px; left: 216.431949553337px;"></div>
    <div class="line line2" style="top: 573.84309623431px; left: 342.502364687336px;"></div>
    <div class="line line3" style="top: 525.874476987448px; left: 396.859169732002px;"></div>
    <div class="line line4" style="top: 496.905857740586px; left: 451.215974776668px;"></div>
    <div class="line line5" style="top: 477.937238493724px; left: 486.572779821335px;"></div>
    <div class="line line6" style="top: -0.0313807531380759px; left: 7.92958486600105px;"></div>
    <h1 style="top: 90.9px; left: 90.9px;">弹性鞋底 <span>增添动力</span></h1>
    <div class="shoe_part" id="shoe-build-progrid" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-3.png"></div>
    <div class="shoe_shadow" id="progrid-shoe-shadow" style="top: 649px; left: 401.5px;"></div>
    <!-- Progrid Pop-outs -->
    <div class="pop_out" id="progrid_pop1" style="top: 526px; left: 676.5px; display: none; opacity: 1;">
      <div class="pop_out_text">
        <div>
          <p>PROGRID provides underfoot cushioning for more responsiveness and enhanced comfort. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="vidWrap" id="video_progrid_1" style="left: 17.9295848660011px; top: 313.811715481172px; opacity: 1;"> <a href="" class="colorboxVideo cboxElement" title="PROGRID OVERVIEW">
      <div class="videoBtn" id="video_progrid_btn"></div>
      <div class="videoBtnHover" id="video_progrid_btn_hover"></div>
      </a> </div>
    <div class="videoLbl" id="video_lbl_progrid_1" style="left: 103.215974776668px; top: 473.686192468619px; opacity: 1;"> <a href="" class="colorboxVideo cboxElement" title="PROGRID OVERVIEW">
      <h2>PROGRID OVERVIEW</h2>
      </a> </div>
    <div class="detailWrap" id="detail_progrid_1" style="top: 413.811715481172px; opacity: 1; left: 1310.929584866px;"> <a href="#misc/kinvara3/img/k3_lb_3.2.jpg" class="colorboxImage cboxElement" title="HEEL SUPPORT">
      <div class="detailBtn" id="detail_progrid_1_btn"></div>
      <div class="detailBtnHover" id="detail_progrid_1_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_progrid_1" style="top: 443.686192468619px; opacity: 1; left: 1280.21597477667px;"> <a href="#misc/kinvara3/img/k3_lb_3.2.jpg" class="colorboxImage cboxElement" title="HEEL SUPPORT">
      <h2>HEEL SUPPORT</h2>
      </a> </div>
    <div class="quote quote3_1" id="quote_progrid_1" style="top: 343.560669456067px; left: 1083.43194955334px; opacity: 0.8;">
      <p>“The Kinvara 3 is about<br>
        efficiency, not sacrifice.”</p>
    </div>
    <div class="quote quote3_2" id="quote_progrid_2" style="top: 263.717573221757px; left: 688.14555964267px; opacity: 0.3;">
      <p>“It’s the perfect shoe for the minimalist runner<br>
        who doesn’t want to sacrifice comfort.”</p>
      <span>Dan Sullivan<br>
      Saucony Footwear Team</span> </div>
    <div class="keyword keyword3_1" id="keyword_progrid_1" style="left: 470.788754598003px; opacity: 1; top: 579.84309623431px;">7<span>.7</span>oz</div>
  </section>
  <section id="midsole" style="height: 910px; width: 1903px;"> <a name="midsole"></a>
    <div class="downBtn">
      <button type="button" class="btnScrollVert" id="downBtnMidsole">
      <div class="arrow"></div>
      </button>
    </div>
    <div class="persp_background" id="midsole-bg" style="top: -295px; left: -98.5px;"></div>
    <div class="line line1" style="top: 716.686192468619px; left: 216.431949553337px;"></div>
    <div class="line line2" style="top: 573.84309623431px; left: 342.502364687336px;"></div>
    <div class="line line3" style="top: 525.874476987448px; left: 396.859169732002px;"></div>
    <div class="line line4" style="top: 496.905857740586px; left: 451.215974776668px;"></div>
    <div class="line line5" style="top: 477.937238493724px; left: 486.572779821335px;"></div>
    <div class="line line6" style="top: -0.0313807531380759px; left: 7.92958486600105px;"></div>
    <h1 style="top: 90.9px; left: 90.9px;">多种保护 <span>安全无忧</span></h1>
    <div class="shoe_part" id="shoe-build-midsole" style="top: 291px; left: 626.5px; position: absolute; display: block;"><img src="css/shoe-part-4.png"></div>
    <div class="shoe_shadow" id="midsole-shoe-shadow" style="top: 649px; left: 401.5px;"></div>
    <div class="pop_out" id="midsole_pop1" style="top: 511px; left: 796.5px; display: none; opacity: 1;">
      <div class="pop_out_text">
        <div>
          <p>A high abrasion EVA+ midsole provides protection without restricting natural foot movement. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="detailWrap" id="detail_midsole_1" style="top: 393.811715481172px; opacity: 1; left: 1350.929584866px;"> <a href="#misc/kinvara3/img/k3_lb_4.2.jpg" class="colorboxImage cboxElement" title="HYDRAMAX LINING">
      <div class="detailBtn" id="detail_midsole_1_btn"></div>
      <div class="detailBtnHover" id="detail_midsole_1_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_midsole_1" style="top: 423.686192468619px; opacity: 1; left: 1400.21597477667px;"> <a href="#misc/kinvara3/img/k3_lb_4.2.jpg" class="colorboxImage cboxElement" title="HYDRAMAX LINING">
      <h2>HYDRAMAX LINING</h2>
      </a> </div>
    <div class="detailWrap" id="detail_midsole_2" style="left: 384.929584866001px; top: 383.811715481172px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_5.2.jpg" class="colorboxImage cboxElement" title="SOLE BLUEPRINT">
      <div class="detailBtn" id="detail_sole_2_btn"></div>
      <div class="detailBtnHover" id="detail_sole_2_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_midsole_2" style="left: 440.215974776668px; top: 513.686192468619px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_5.2.jpg" class="colorboxImage cboxElement" title="SOLE BLUEPRINT">
      <h2>SOLE BLUEPRINT</h2>
      </a> </div>
    <div class="quote quote4_1" id="quote_midsole_1" style="top: 288.717573221757px; left: 1018.14555964267px; opacity: 0.8;">
      <p>“The Kinvara 3s give the muscles in the calf a<br>
        greater range of motion, allowing for a more<br>
        efficient stride”</p>
      <span>Spencer White<br>
      Saucony Human Performance<br>
      and Innovation Lab</span> </div>
    <div class="quote quote4_2" id="quote_midsole_2" style="opacity: 0.3; top: 624.654811715481px; left: 1132.11035207567px;">
      <p>“The Kinvara 3 is engineered to<br>
        let the foot do the work.””</p>
    </div>
    <div class="keyword keyword4_1" id="keyword_midsole_1" style="left: 26.4319495533368px; opacity: 1; top: 617.84309623431px;">4mm
      <div class="note">Heel-to-Toe Drop</div>
    </div>
  </section>
  <section id="sole" style="height: 910px; width: 1903px;"> <a name="sole"></a>
    <div class="downBtn">
      <button type="button" class="btnScrollVert" id="downBtnSole">
      <div class="arrow"></div>
      </button>
    </div>
    <div class="persp_background" id="sole-bg" style="top: -295px; left: -98.5px;"></div>
    <div class="line line1" style="top: 716.686192468619px; left: 216.431949553337px;"></div>
    <div class="line line2" style="top: 573.84309623431px; left: 342.502364687336px;"></div>
    <div class="line line3" style="top: 525.874476987448px; left: 396.859169732002px;"></div>
    <div class="line line4" style="top: 496.905857740586px; left: 451.215974776668px;"></div>
    <div class="line line5" style="top: 477.937238493724px; left: 486.572779821335px;"></div>
    <div class="line line6" style="top: -0.0313807531380759px; left: 7.92958486600105px;"></div>
    <h1 style="top: 90.9px; left: 90.9px;">科技引领 <span>尽在细节</span></h1>
    <div class="shoe_part" id="shoe-build-sole" style="top: 291px; left: 626.5px;"> <img src="css/shoe-part-5.1.png" class=""> <img src="css/shoe-part-5.2.png" class="hidden"> <img src="css/shoe-part-5.3.png" class="hidden"> <img src="css/shoe-part-5.4.png" class="hidden"> <img src="css/shoe-part-5.5.png" class="hidden"> <img src="css/shoe-part-5.6.png" class="hidden"> </div>
    <div class="shoe_shadow" id="sole-shoe-shadow" style="top: 649px; left: 401.5px;"></div>
    <!-- Sole Pop-outs -->
    <div class="pop_out" id="sole_pop1" style="top: 391px; left: 756.5px; display: none; opacity: 1; z-index: 10000;">
      <div class="pop_out_text" style="opacity: 0;">
        <div style="opacity: 0;">
          <p>Beveled and decoupled heel for better transition. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="pop_out" id="sole_pop2" style="top: 331px; left: 966.5px; display: none; opacity: 1; z-index: 10000;">
      <div class="pop_out_text" style="opacity: 0;">
        <div style="opacity: 0;">
          <p>XT-900 rubber through the lateral mid-foot provides enhanced durability for mid-foot strikers. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="pop_out" id="sole_pop3" style="top: 491px; left: 1026.5px; display: none; opacity: 1; z-index: 10000;">
      <div class="pop_out_text" style="opacity: 0;">
        <div style="opacity: 0;">
          <p>Nine triangular lugs under the forefoot create a pistoning effect for a responsive ride. </p>
        </div>
      </div>
      <button type="button">+</button>
    </div>
    <div class="vidWrap" id="video_sole_1" style="top: 433.811715481172px; opacity: 1; left: 1390.929584866px;"> <a href="http://player.vimeo.com/video/39478650?title=0&byline=0&portrait=0&color=ba0f0f" class="colorboxVideo cboxElement" title="SOLE OVERVIEW">
      <div class="videoBtn" id="video_sole_btn"></div>
      <div class="videoBtnHover" id="video_sole_btn_hover"></div>
      </a> </div>
    <div class="videoLbl" id="video_lbl_sole_1" style="top: 463.811715481172px; opacity: 1; left: 1394.929584866px;"> <a href="http://player.vimeo.com/video/39478650?title=0&byline=0&portrait=0&color=ba0f0f" class="colorboxVideo cboxElement" title="SOLE OVERVIEW">
      <h2>SOLE OVERVIEW</h2>
      </a> </div>
    <div class="detailWrap" id="detail_sole_2" style="left: 77.9295848660011px; top: 333.811715481172px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_5.3.jpg" class="colorboxImage cboxElement" title="DECOUPLED &amp; BEVELED HEEL">
      <div class="detailBtn" id="detail_sole_2_btn"></div>
      <div class="detailBtnHover" id="detail_sole_2_btn_hover"></div>
      </a> </div>
    <div class="detailLbl" id="detail_lbl_sole_2" style="left: 113.215974776668px; top: 363.686192468619px; opacity: 1;"> <a href="#misc/kinvara3/img/k3_lb_5.3.jpg" class="colorboxImage cboxElement" title="DECOUPLED &amp; BEVELED HEEL">
      <h2>DECOUPLED &amp; BEVELED HEEL</h2>
      </a> </div>
    <div class="quote quote5_1" id="quote_sole_1" style="left: 1173.43194955334px; opacity: 0.8; top: 755.560669456067px;">
      <p>“It offers protection, but<br>
        not correction”</p>
    </div>
    <div class="quote quote5_2" id="quote_sole_2" style="top: 253.937238493724px; left: 774.929584866001px; opacity: 0.4;">
      <p>“Many Kinvara 3 wearers will opt for<br>
        mid or forefoot strike, but for heel<br>
        strikers it now offers a smoother<br>
        transition.”</p>
      <span>Dan Sullivan<br>
      Saucony Footwear Team</span> </div>
  </section>
</div>
<!-- Shoe Browser -->
<div id="shoeBrowser" style="display: block; height: 910px;"> <a name="colors"></a>
  <div class="downBtn">
    <button type="button" class="btnScrollVert" id="downBtnBrowser">
    <div class="arrow"></div>
    </button>
  </div>
  <div id="scrollWrap" style="width: 1903px; height: 909px;">
    <div id="zebra_stripe" style="width: 1903px; height: 909px; right: 0px; background-color: rgb(126, 81, 147);">
      <div class="color_b" style="height: 909px; display: block; background-color: rgb(126, 81, 147);"></div>
      <div class="pattern" style="height: 909px;"></div>
    </div>
    <div class="scrollLeft" data-top="345" style="top: 422.25px; left: 0px;">
      <button type="button" class="btnScrollLeft" id="shoeScrollLeft"><img src="css/arrow-left.png" alt="previous"></button>
    </div>
    <div class="scrollRight" data-top="345" style="top: 422.25px; right: 0px;">
      <button type="button" class="btnScrollRight" id="shoeScrollRight"><img src="css/arrow-right.png" alt="next"></button>
    </div>
    <div id="genderNav" data-top="150" style="top: 227.25px; left: 451.5px;">
      <h1>颜色选择</h1>
      <h2><a href="#misc/kinvara3/#" class="men" id="browser_switch_male">男式</a></h2>
      <h2><a href="#misc/kinvara3/#" class="women current" id="browser_switch_female">女式</a></h2>
    </div>
    <div id="shoe_display" data-top="2" style="top: 79.25px; right: 491.5px; display: block;">
      <div id="men-disp-1" class="shoe_container hidden"><img src="css/men-full-bcr.png"></div>
      <div id="men-disp-2" class="shoe_container hidden"><img src="css/men-full-wb.png"></div>
      <div id="men-disp-3" class="shoe_container hidden"><img src="css/men-full-bc.png"></div>
      <div id="men-disp-4" class="shoe_container hidden"><img src="css/men-full-gr.png"></div>
      <div id="men-disp-5" class="shoe_container hidden"><img src="css/men-full-nso.png"></div>
      <!--<div id="men-disp-6" class="shoe_container hidden"><img src="img/men-full-bg.png"></div>-->
      <div id="men-disp-6" class="shoe_container hidden"><img src="css/men-full-yb.png"></div>
      <div id="women-disp-1" class="shoe_container hidden"><img src="css/women-full-wcp.png"></div>
      <div id="women-disp-2" class="shoe_container hidden"><img src="css/women-full-bw.png"></div>
      <div id="women-disp-3" class="shoe_container hidden"><img src="css/women-full-bwr.png"></div>
      <div id="women-disp-4" class="shoe_container"><img src="css/women-full-gp.png"></div>
      <div id="women-disp-5" class="shoe_container hidden"><img src="css/women-full-wpb.png"></div>
      <div id="women-disp-6" class="shoe_container hidden"><img src="css/women-full-py.png"></div>
    </div>
    <div id="shoe_scroller" data-top="2" style="top: 79.25px; right: 460px; display: none;">
      <div id="men-scroll-1" class="shoe_container hidden"><img src="css/men-full-bcr.png"></div>
      <div id="men-scroll-2" class="shoe_container hidden"><img src="css/men-full-wb.png"></div>
      <div id="men-scroll-3" class="shoe_container hidden"><img src="css/men-full-bc.png"></div>
      <div id="men-scroll-4" class="shoe_container hidden"><img src="css/men-full-gr.png"></div>
      <div id="men-scroll-5" class="shoe_container hidden"><img src="css/men-full-nso.png"></div>
      <!--<div id="men-scroll-6" class="shoe_container hidden"><img src="img/men-full-bg.png"></div>-->
      <div id="men-scroll-6" class="shoe_container hidden"><img src="css/men-full-yb.png"></div>
      <div id="women-scroll-1" class="shoe_container hidden"><img src="css/women-full-wcp.png"></div>
      <div id="women-scroll-2" class="shoe_container hidden"><img src="css/women-full-bw.png"></div>
      <div id="women-scroll-3" class="shoe_container hidden"><img src="css/women-full-bwr.png"></div>
      <div id="women-scroll-4" class="shoe_container"><img src="css/women-full-gp.png"></div>
      <div id="women-scroll-5" class="shoe_container hidden"><img src="css/women-full-wpb.png"></div>
      <div id="women-scroll-6" class="shoe_container hidden"><img src="css/women-full-py.png"></div>
    </div>
    <div id="color_chooser" data-top="519" style="top: 596.25px;">
      <div id="chooser_selected" style="left: 884px;"></div>
      <div id="chooser_menu" style="left: 479px;">
        <ul>
          <li class="hidden">
            <button type="button" id="color-thumb-1">
            <div class="thmb_img"></div>
            <span>Black / Citron / Red</span></button>
          </li>
          <li class="hidden">
            <button type="button" id="color-thumb-2">
            <div class="thmb_img"></div>
            <span>White / Blue</span></button>
          </li>
          <li class="hidden">
            <button type="button" id="color-thumb-3">
            <div class="thmb_img"></div>
            <span>Blue / Green</span></button>
          </li>
          <li class="hidden">
            <button type="button" id="color-thumb-4">
            <div class="thmb_img"></div>
            <span>Gray / Red</span></button>
          </li>
          <li class="hidden">
            <button type="button" id="color-thumb-5">
            <div class="thmb_img"></div>
            <span>Navy / Silver / Orange<!--<br>(Available 7/1)--></span></button>
          </li>
          <!--<li><button type="button" id="color-thumb-6"><div class="thmb_img"></div><span>Blue / Citron<br>(Available 7/1)</span></button></li>-->
          <li class="hidden">
            <button type="button" id="color-thumb-6">
            <div class="thmb_img"></div>
            <span>Yellow / Black<!--<br>(Available 7/1)--></span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-8">
            <div class="thmb_img"></div>
            <span>White / Citron</span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-9">
            <div class="thmb_img"></div>
            <span>Blue / White</span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-10">
            <div class="thmb_img"></div>
            <span>Blue / Red</span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-11">
            <div class="thmb_img"></div>
            <span>Grey / Purple</span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-12">
            <div class="thmb_img"></div>
            <span>Pink / White<!--<br>(Available 7/1)--></span></button>
          </li>
          <li class="">
            <button type="button" id="color-thumb-13">
            <div class="thmb_img"></div>
            <span>Purple / Yellow<!--<br>(Available 7/1)--></span></button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="comingSoon" style="display: block;">
  <div id="scrollUpBtn">
    <button type="button" class="btnScrollTop" id="scrollToTop"><img src="css/arrow-up.png" alt="Back to top"></button>
  </div>
</div>
<script src="css/jquery-1.7.2.min.js"></script> 
<script src="css/jquery-ui.min.js"></script> 
<script src="css/plugins.js"></script> 
<script src="css/script.js"></script> 
<script src="css/util.js"></script> 
<script src="css/ga.js"></script><script>var shares_wb = 7;</script><script src="css/wb.js"></script> 
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Page Caching using disk
 Served from: www.webhek.com @ 2014-09-27 08:49:43 by W3 Total Cache -->
<div id="cboxOverlay" style="opacity: 1; cursor: auto; display: none;"></div>
<div id="colorbox" class="" style="padding-bottom: 0px; padding-right: 0px; top: 1192px; left: 790px; position: absolute; width: 324px; height: 484px; opacity: 1; cursor: auto; display: none;">
  <div id="cboxWrapper" style="height: 484px; width: 324px;">
    <div>
      <div id="cboxTopLeft" style="float: left;"></div>
      <div id="cboxTopCenter" style="float: left; width: 324px;"></div>
      <div id="cboxTopRight" style="float: left;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxMiddleLeft" style="float: left; height: 484px;"></div>
      <div id="cboxContent" style="float: left; width: 324px; height: 484px;">
        <div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
        <div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
        <div id="cboxTitle" style="float: left; display: block;"></div>
        <div id="cboxCurrent" style="float: left; display: none;"></div>
        <div id="cboxNext" style="float: left; display: none;"></div>
        <div id="cboxPrevious" style="float: left; display: none;"></div>
        <div id="cboxSlideshow" style="float: left; display: none;"></div>
        <div id="cboxClose" style="float: left;">close</div>
      </div>
      <div id="cboxMiddleRight" style="float: left; height: 484px;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxBottomLeft" style="float: left;"></div>
      <div id="cboxBottomCenter" style="float: left; width: 324px;"></div>
      <div id="cboxBottomRight" style="float: left;"></div>
    </div>
  </div>
  <div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 右键菜单 滚动切换 文字提示框 图片滚动 提示框/弹出层 文字滚动 layer lightbox 图片文字滚动 全屏滚动 Tooltip工具提示框 浮动提示框 页面滚动 html5弹窗动画 滚动流动 自动滚动图片轮播 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到