• 關(guān)于英雄聯(lián)盟月餅冰淇淋這個頁面，可以說遇到了一些以前沒遇到過的情況匾荆，重點是講述PC翻屏滾動悯周，在此之外粒督，對于翻屏滾動時的動畫加載，再由頭部底部時的判斷等情況队橙，做一個總結(jié)
  Ps:考慮到兼容性的一些問題坠陈，這里用的是swiper2.7的版本

• 1.頭部引入CSS

<link rel="stylesheet" href="css/idangerous.swiper.css">

• 2.html結(jié)構(gòu)

<div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide"> Slide1</div>
      <div class="swiper-slide"> Slide2</div>
      <div class="swiper-slide"> Slide3</div>
  </div>
</div>

• 3.引入Javascript，并對輪播進行初始化

<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{ 
  //是否開啟鼠標控制Swiper切換,設(shè)置為true時捐康，能使用鼠標滾輪控制slide滑動             
  mousewheelControl : false,
  //當值為true讓鼠標滾輪固定于軸向
  mousewheelControlForceToAxis : true,
  //設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)仇矾。可以設(shè)置為數(shù)字（可為小數(shù)解总，小數(shù)不可loop）贮匕，
  //或者 'auto'則自動根據(jù)slides的寬度來設(shè)定數(shù)量。loop模式下如果設(shè)置為'auto'還需要設(shè)置另外一個參數(shù)[loopedSlides]
  slidesPerView: 1,
  mode: 'vertical',
 

• 3.1在頁面切換前回調(diào)函數(shù)

  onSlideChangeStart: function(swiper){
    //翻頁動畫
    annzmy.doCSSAnimation('.pic_box1','slideInDown');
    annzmy.doCSSAnimation('.pic_box2','slideInUp2');
    //側(cè)邊欄樣式根據(jù)當前頁進行變換
    var _class = 's-buy2 s-story2 s-detail2 s-meaning2 s-notice2';
    switch (swiper.activeIndex){
      case 0:
        $(".s-nav").css('top','122px');
        $('#navSlide li').eq(0).find('a').addClass('s-buy2').parents('li').siblings().find('a').removeClass(_class);
        break;
      case 1:
        $(".s-nav").css('top','122px');
        $('#navSlide li').eq(1).find('a').addClass('s-story2').parents('li').siblings().find('a').removeClass(_class);
        break;
      case 2:
      case 4:
      case 5:
        $(".s-nav").css('top','122px');
        $('#navSlide li').eq(2).find('a').addClass('s-detail2').parents('li').siblings().find('a').removeClass(_class);
        break;
      case 3:
        $(".s-nav").css('top','-60px');
        $('#navSlide li').eq(2).find('a').addClass('s-detail2').parents('li').siblings().find('a').removeClass(_class);
        break;
      }
    }
});

• 3.2側(cè)邊欄跳轉(zhuǎn)

slideto('.a1',0);
slideto('.a2',1);
slideto('.a3',2);
slideto('.a4',6);
slideto('.a5',7);
// 側(cè)邊欄跳轉(zhuǎn)
function slideto(elm,index){
  $(elm).click(function(){
    mySwiper.swipeTo(index, 1000, true);//切換到第一個slide花枫，速度為1秒
    $('.ost').hide();
    $('body').css('padding-top','0');
    $('#footer_ied').hide();
  });
}  

• 3.3整屏滾動

var wheelPage=document.body;
//禁止默認滾輪事件
if (wheelPage.addEventListener) {
  // IE9, Chrome, Safari, Opera
  wheelPage.addEventListener("mousewheel", wheelMouse, false);
  // Firefox
  wheelPage.addEventListener("DOMMouseScroll", wheelMouse, false);
}
else{
  // IE 6/7/8
  wheelPage.attachEvent("onmousewheel", wheelMouse);
}
function wheelMouse(event) {
  if(checkBrowerIE8()){
    if(document.getElementById('inner-text2').contains(window.event.srcElement))return;
}else{
  if (event.target === $('.s-text-box2')[0] || event.target === $('.inner-text2')[0]  || $(event.target).parents('.inner-text2').length > 0) return;
}
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
var e = window.event || event;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta > 0) {
//向上滾動
if (mySwiper.activeIndex === 0) {
  if ($('.ost').css('display') === 'none') {
    $('.ost').show();
    $('body').css('padding-top','42px');
  }else {
    mySwiper.swipePrev();
  }
}else if (mySwiper.activeIndex === 7) {
  if ($('#footer_ied').css('display') === 'block') {
    $('#footer_ied').hide();
    $('body').css('padding-top','0');
    $('.ost').hide();
    window.scrollTo(0, 0);
  }else {
    $('.ost').hide();
    $('body').css('padding-top','0');
    mySwiper.swipePrev();
  }
}else {
  mySwiper.swipePrev();
}

在做整屏滾動時刻盐，發(fā)現(xiàn)頁面設(shè)計稿的寬高是固定死的，所以不能根據(jù)頁面大小來正忱秃玻縮放敦锌，影響整屏翻動和視覺體驗

//自動縮放

    var annzmy= {
        init: function () {
            $(window).bind('resize', annzmy.autoScale).trigger('resize');
        },
        autoScale: function () {
            var autoWidth = $(window).width();
            var scaleObj = $('.s-nav,.swiper-container');
            if(autoWidth <= 1240){
                autoWidth = 1240;
            }
            var scale = autoWidth/1920;
            var autoHeight = scale*980;
            $('.g-wrap').height(autoHeight);

            scaleObj.css({'-webkit-transform': 'scale('+ scale +')','-webkit-transform-origin':'top left','-moz-transform': 'scale('+ scale +')','-moz-transform-origin':'top left','transform': 'scale('+ scale +')','transform-origin':'top left'});

            var browser=navigator.appName, b_version=navigator.appVersion, version=b_version.split(";"), trim_Version= version.length > 1 ? version[1].replace(/[ ]/g,"") : "";
            if( browser=="Microsoft Internet Explorer" && (trim_Version=="MSIE8.0" || trim_Version=="MSIE7.0" || trim_Version=="MSIE6.0") ) {
                scaleObj.css('zoom',scale);
            }
        };
       $(function () { annzmy.init(); });