翻屏滚动——PC端

关于英雄联盟月饼冰淇淋这个页面，可以说遇到了一些以前没遇到过的情况，重点是讲述PC翻屏滚动，在此之外，对于翻屏滚动时的动画加载，再由头部底部时的判断等情况，做一个总结
Ps:考虑到兼容性的一些问题，这里用的是swiper2.7的版本

1.头部引入CSS

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

2.html结构

<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切换,设置为true时，能使用鼠标滚轮控制slide滑动             
  mousewheelControl : false,
  //当值为true让鼠标滚轮固定于轴向
  mousewheelControlForceToAxis : true,
  //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），
  //或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数[loopedSlides]
  slidesPerView: 1,
  mode: 'vertical',

3.1在页面切换前回调函数

  onSlideChangeStart: function(swiper){
    //翻页动画
    annzmy.doCSSAnimation('.pic_box1','slideInDown');
    annzmy.doCSSAnimation('.pic_box2','slideInUp2');
    //侧边栏样式根据当前页进行变换
    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侧边栏跳转

slideto('.a1',0);
slideto('.a2',1);
slideto('.a3',2);
slideto('.a4',6);
slideto('.a5',7);
// 侧边栏跳转
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();
}

在做整屏滚动时，发现页面设计稿的宽高是固定死的，所以不能根据页面大小来正常缩放，影响整屏翻动和视觉体验

//自动缩放

    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(); });

翻屏滚动——PC端

推荐阅读更多精彩内容