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