以下是工作中常用代码片段
head部分插入代码,自动调整到设备宽度,并禁止用户缩放页面
1 | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover" /> |
移动端字体的使用系统默认即可,只需要标注出英文
header 部分样式,如果只有图片的情况
display: block;//消除图片之间的间距,父元素设置fontsize:0;也能达到效果,但是可能会引起其他问题
1 | @import '../../../../../public/source/sass/normalize'; |
背景渐变兼容性写法
1 | background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); |
标题相关样式
1 | //标题两端添加图片 |
单行内容超出隐藏 / 多行文本超出隐藏
1 | overflow: hidden; |
文字渐变
1 | background: -ms-linear-gradient(top, #fff, #FFD246); |
translate的兼容性写法
1 | transform: translateX(-50%); |
1 | display: -webkit-box; |
输入框
1 | <ul class="info-box"> |
.addbody {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.layer {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
.pop {
display: none;
position: fixed;
left: 50%;
top: 40%;
width: 90%;
margin-left: -45%;
padding: 2rem 0;
box-sizing: border-box;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
z-index: 1001;
}
//js部分
function popShow($id) {
$(‘body’).addClass(‘addbody’);
$(‘.layer’).show();
$id.show();
}
function popHide($id) {
$(‘body’).removeClass(‘addbody’);
$(‘.layer’).hide();
$id.hide();
}
$(‘’).click(function(){
popShow($(pop));
})
$(‘.cha’).click(function(){
popHide($(pop));
})
//弹窗函数 封装组件的形式
$.fn.popShow = function () {
$(‘.layer’).show();
$(‘body’).addClass(‘addbody’);
$(this).show();
return this;
}
$.fn.popHide = function () {
$(‘.layer’).hide();
$(‘body’).removeClass(‘addbody’);
$(this).hide();
return this;
}
底部按钮的出现和隐藏
footer {
display: none;
opacity: 0;
position: fixed;
width: 100%;
height: 6.5rem;
bottom: 0;
left: 0;
padding: 0.3rem 0 0 0;
background-color: #e2a35e;
z-index: 1000;
transition: all 700ms;
-webkit-transition: all 700ms;
-moz-transition: all 700ms;
-ms-transition: all 700ms;
-o-transition: all 700ms;
&.fidein {
opacity: 1;
}
}
$(window).scroll(function () {
var scrollTop = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = $(window).scrollTop();
var x = $(‘.btn’).offset();
var top = x.top;
if (scrollTop > top) {
$(‘.footer’).css(‘display’, ‘block’);
setTimeout(function () {
$(‘.footer’).addClass(‘fadein’);
}, 0)
} else {
$(‘.footer’).removeClass(‘fadein’);
}
})
1
2
3
4如何让移动端zepto支持动画
在github中 https://github.com/madrobby/zepto,找到fx.js文件,把内容追加到zepto.min.js中,
浮动框滑动
var timer=null;
function startMove(element, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
//因为速度要动态改变,所以必须放在定时器中
var iSpeed = (iTarget - element.offsetTop) / 8; //(目标值-当前值)/缩放系数=速度
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整
if (element.offsetTop === iTarget) {//结束运动
clearInterval(timer);
} else {
element.style.top = element.offsetTop + iSpeed + “px”;
}
}, 30);
}
var targetY=0;
var move=document.getElementById(“move”);
window.onscroll = function(e) {
var e = e || window.event;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
targetY=scrolltop+160;
/console.log(targetY);/
startMove(move,targetY);
};
var scrollTop=0;
var $body=$(“body”);
1
2
3页面跳转 相对路径
`window.location = window.location.origin + "/Html/aghd/native/6/20180927/html/goOpen.html"`
滚动播放
function moveTop ($obj) {
var $child=$obj.children().clone();
$obj.append($child);
var initTop=0;
var timer=null;
clearInterval(timer);
timer=setInterval(function () {
initTop=$obj.scrollTop();
initTop++;
if(initTop>=$child.height()){
initTop-=$child.height();
}
$obj.scrollTop(initTop);
},50);
}
moveTop($(“.content-box”));