mcake活动维护常见问题记录【pc端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

★ ★ ★ ★ ★ ★ ★ ★ ★ ★pc端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

问题一、pc.弹窗，背景兼容ie8的写法

;;; -moz-opacity:.7;filter:alpha(opacity=70);  /*半透明兼容ie8*/display: none;}

.Dialog-quan{position: fixed;top: 50%; left: 50%;  box-shadow: 0 0 0 #999; font-size: 14px;     width:560px; height: 351px; background: url("../images/jp-bg.png"); margin: -175px  auto 0 -280px; padding: 0; z-index: 99999; display: none;
  .closes{ width: 30px; height: 30px; position: absolute; top:-45px; right:-45px; cursor: pointer; z-index: 8; background: url("../images/close.png") no-repeat;}
  .quan{position: relative; display: none; margin-top: 40px;
    .go-use {display: block; position: absolute; bottom: 207px; left: 50%; margin-left: -120px; width: 240px; height: 50px; cursor: pointer}
  }
}

<div class="Dialogbg-quan"></div>
<div class="Dialog-quan">
    <div class="closes"></div>
    <div class="quan quan-1"><a class="go-use" href="#cake"></a><img src="data:images/jp-1.png" alt=""></div>
    <div class="quan quan-2"><a class="go-use" href="#cake"></a><img src="data:images/jp-2.png" alt=""></div>
</div>

针对ie8下空按钮无法点击的情况，可以给按钮设置个背景色，然后通过设置透明度为0，来解决。

如：

; ; filter:alpha(opacity=0);/*半透明兼容ie8*/ }

=====================================================================

问题二、pc兼容小屏处理方案

方案1、通过css3样式进行控制，但是不支持ie8，但是可以通过引入respond.src.js来实现ie8兼容CSS3 Media查询

<script src="https://act.mcake.com/fangli/2019/pc/common/respond.src.js"></script>

@media screen and (max-width:1700px) {
   .dis-1{left: -100px !important;}
   .dis-2{right: -180px !important;}
}

方案2、通过js判断是否超过1700px

 var maxWidth = $(window).width();
  if(maxWidth < 1700){
       。。。
  }else{
       。。。
 }
 $(window).resize(function() {
    maxWidth = $(window).width();
    if(maxWidth < 1700){
         。。。
   }else{
         。。。
   }
});

================================================================

问题三、引入公共文件、public-shimily.js

================================================================

问题四、判断ie浏览器的版本

  /*
 *判断ie浏览器版本
 * */
  function IEVersion() {
    var userAgent = navigator.userAgent; /*取得浏览器的userAgent字符串*/
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; /*判断是否IE<11浏览器*/
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; /*判断是否IE的Edge浏览器*/
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      var fIEVersion = parseFloat(RegExp["$1"]);
      if(fIEVersion == 7) {
        return 7;
      } else if(fIEVersion == 8) {
        return 8;
      } else if(fIEVersion == 9) {
        return 9;
      } else if(fIEVersion == 10) {
        return 10;
      } else {
        return 6;//IE版本<=7
      }
    } else if(isEdge) {
      return 'edge';//edge
    } else if(isIE11) {
      return 11; //IE11
    }else{
      return -1;//不是ie浏览器
    }
  }
  //console.log(IEVersion());
  window.IEVersion = IEVersion;
  /*浏览器判断*/
  /*if(IEVersion() > 0 && IEVersion() < 11){
    alert("您的浏览器版本过低，\n因此无法上传照片参与抽奖活动，\n请及时更换最新的浏览器！");
  }*/

================================================================

问题五、清除浮动

1.通过overflow: hidden;清除浮动

.box{overflow: hidden;}

2.通过css3伪类

;visibility: hidden;}

3.

;;}

<div class="cleaBoth"></div>

================================================================

问题六、数量加减时，禁止双击会自动选中

/*数量加减时，禁止双击选中*/
span.num{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}

================================================================

问题七、【PC】端动画制作，参考“manyuemei”项目

第一步：切图png,把每一帧都切出来

第二步：使用TextureMerger序列帧动画，【导出】序列帧合成的图片和对应的json，并生成mym-a.json

第三步：使用ResDepot，生成资源配置res.json （png和json都生成在配置里面）

第四步：mym-a.json里的时间配置

"bd4":{"x":131,"y":0,"w":129,"h":264,"offX":0,"offY":0,"sourceW":129,"sourceH":264, duration:3},   /* duration:3      3=0.3*10*/

<div class="secItem mym-a" id="el_mym-a" data-anim="fade-in" data-delay="0.8" ></div>

.mym-a{ width: 240px; height: 241px; top: 247px; left: 874px;}

 var animations= {
    mymA: function () {
      var mc = new MovieClip('mym-a_png', "mym-a_json", 'el_mym-a');
      mc.gotoAndPlay(1, -1);
      return mc;
    },
    mymB: function () {
      var mc = new MovieClip('mym-b_png', "mym-b_json", 'el_mym-b');
      mc.gotoAndPlay(1, -1);   /* -1循环播放    1，2，3播放次数*/
      return mc;
    }
  }

animations.mymA();

第五步：修改

注意：

1.提前引入库文件<script type="text/javascript" src="MovieClip/ec_main.js"></script>

================================================================

问题八、pc兼容ie8浏览器CSS3 Media的方法

解决方案：可以通过引入respond.src.js来实现ie8兼容CSS3 Media查询

<script src="https://act.mcake.com/fangli/2019/pc/common/respond.src.js"></script>

================================================================