mobile_音悦台

音悦台

mobile_音悦台

  • 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 选项卡

mobile_音悦台

  • 可以看到图中 港台 下面的小绿条

不能使用 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"]();        调用,返回值 当前次数运动到的位置

mobile_音悦台

  • 封装: 将一段过渡(加速 或者 回弹),分为几段去完成。
  • (即点即停:内部使用定时器实现,在点击 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 传入屏幕滑动 逻辑中,处理横向抖动问题
上一篇:Codeforces Round #248 (Div. 1)——Ryouko's Memory Note


下一篇:laravel ajax表格删除