音悦台
- less 可以 width = 1080/67.5rem;
/**** 变量定义 ****/
@px: 67.5rem; /**** Start ****/
#wrap {
width: 100%;
height: 100%; background-color: #eee;
#content {
width: 1080/@px;
height: 135/@px; background-color: #96b377;
}
}
- 头部 header
- Logo 用 h1 和 a 包裹
- 移动端的 点击元素 大多使用 <a> 模拟
移动端 默认有 a元素的高亮 设置成 透明色
a {
-webkit-tap-hightlight-color: rgba(0, 0, 0, 0);
}
- 两个 input 之间有缝 的 2 个解决方法
1. 父元素 font-size: 0;
2. float: left;
- 封装原生 js 操作 class
- 因为阻止冒泡,所有的 document 事件都不会执行,此时,补一个 e.preventDefault();
- 元素 js 获取焦点 ele.focus();
- 元素 js 失去焦点 ele.blur();
- 内容区 导航条
文本永不换行(实现长导航栏)
- nav
375 屏幕大小
- ul
white-space: nowrap;
float: left; 浮动/定位,由子元素撑开宽度
font-size: 0;
- 橡皮筋特效
touchstart
元素清除 动画.style.transition = "0s none";
拉:越来越难拉
- 比例 scale = 0.6 - translateX / (clientWidth*3111111111111111111111111111111111111111111111111111111111111111111111); 由 1 逐渐向 0 减小
- translateX = translateX * scale; translate 始终在增加,只是增加地越来越小。
释放: 加速效果
- 得到此行代码的时间 sTime = new Data().getTime(); // ms
- 元素.style.transition = "2s all ease 0s";
- 元素位置 = touchmoveX + speed*100;
- 回弹
- li 变成 行内块元素
font-size: 1rem; 注意:不是 1/@rem;
解决行内块的缝:
- 父元素 font-size: 0;
- li 浮动
误触 解决方法:
touchstart 设置 isClick = true; 在 touchmove 中 isClick = false;
- 内容区 无缝滑屏
- 抖动:
手指在滑屏,但是图片被滑动
- 防抖动:
单方向→多方向(isFirst取第一次 move 一小段 touchmove,如果 touchmoveY 大于 touchmoveX,则本次滑屏始终禁止)
- 内容区 tab 选项卡
- 可以看到图中 港台 下面的小绿条
不能使用 border 实现
- 监控过渡结束后,再 loading 图 opacity = 1
tabWrap.addEventListener("transitionend", func, false);
tabWrap.removeEventListener(webkitTransitionend", func);
- 2D 变换 元素 的文本会在过渡时产生闪烁
加上 3D 效果
- 近大远小 的效果
- 解决文本闪烁
// 加 3D 效果,因为 3D 效果渲染比 2D 快得多
transformEle(ulList, "translateZ", 0.1);
- 即点即停
在滑动加速过程中,点击屏幕,停止加速
- 关键点:
过渡 覆盖操作
过渡 在元素没加载完,没有过渡效果
没有中过程值,没有过渡效果
过渡 最终检测的是 起点到终点的整个过程,中间过程捕捉不到。
- Tween 算法 实现: (检测元素过渡的 中间值)
https://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
- Tween {
- 中间过程: 正常加速 ---- 匀速
Linear: function {... ...},
- 两边效果: 橡皮筋回弹 ----
back + easeOut
先找到 back ,back 中有个 easeOut: function{... ...}
};
t 当前次数
b 元素的初始位置
c 元素 结束位置 与 初始位置 的距离差
d 总次数 (从0-100,是一次性跑过去,还是 d 次跑过去)
s 回弹系数 s 越大,回弹越远 s 默认值 为 1.70158
Tween["Linear"](); 调用,返回值 当前次数运动到的位置
- 封装: 将一段过渡(加速 或者 回弹),分为几段去完成。
- (即点即停:内部使用定时器实现,在点击 touchstart 时,清除定时器)
- 注意:
每次开启定时器之前,记得先关,保证始终只有一个定时器在运行。
记得在次数完成时,关定时器。
// 竖向 滑屏加速 与 橡皮筋特效 需要封装 translateY 的 transform 函数
// 元素 目标位置 总时间 类型(匀速 或者 回弹)
function tweenMove(ele, target, timeAll, type){
var t = 0; // t : 当前次数
var b = transformCss(ele,'translateY'); // b : 元素初始位置
var c = target - b; // c : 元素结束位置与初始位置 距离差
var d = timeAll/0.02; // d : 总次数 = 总时间/每次花费的时间 //重置开启定时器,清除上一次的定时器
var timer = 0;
clearInterval(timer);
timer = setInterval(function(){
t++; if(t > d){
clearInterval(timer); // 元素停止状态 停止定时器
}else{
var point = Tween[type](t,b,c,d); // 元素正常走的状态(加速和回弹)
transformCss(ele,'translateY',point);
};
},20);
};
- 自定义 滚动条
- 滚动条逻辑
- 滚动条的 height = (屏幕的height / 内容区的高)*屏幕的height
- var callBack = {
start: function(){
滚动条的显示
}, // 1. 触屏的状态
move: function(){
滚动条显示
滚动条移动
}, // 2. 监测 touchmove 3.加速状态
end: function(){} // 4. 加速完的状态更新
};
- 作为 callBack 传入屏幕滑动 逻辑中,处理横向抖动问题