★ ★ ★ ★ ★ ★ ★ ★ ★ ★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>

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

最新文章

  1. OrcharNoCMS中的发布订阅使用
  2. C++类和对象
  3. 关于 datasnap Stream的英文博客能容
  4. 深入浅出Java垃圾回收机制
  5. XSS 前端防火墙(1):内联事件拦截
  6. 数据库中的DDL和DML语言
  7. UNIX网络编程——内网与外网间通信
  8. 分析 Oracle SQL 执行计划的关注点
  9. Omi 拥抱 60FPS 的 Web 动画
  10. Dnsmasq加速本地DNS请求
  11. AWK入门
  12. 【CF896E】Welcome home, Chtholly 暴力+分块+链表
  13. 微信小程序的经纬度不想写死,需要转成number类型不能用浮点型
  14. 第12章—整合Redis
  15. Java IO操作——数据操作流DataOutputStream和DataInputStream的使用
  16. June 15th 2017 Week 24th Thursday
  17. postgresql学习文档
  18. js 中的apply
  19. 一款不错的编程字体Source Code Pro
  20. Azure 镜像市场支持一键部署到云

热门文章

  1. 用Kotlin开发Android的Hello Kotlin!!
  2. 科班学习java遇到瓶颈,每天云里雾里怎么办?
  3. Mongo 查询
  4. Maven项目settings.xml的配置
  5. django-admin自定义登录
  6. Python-装饰器、生成器
  7. Linux Shell编程第1章——Shell脚本编程概述
  8. rpm命令,yum命令大全
  9. PHP-FPM 设置多pool、配置文件重写
  10. ASP.NET MVC Select无限级分类选择下拉框