zoukankan      html  css  js  c++  java
  • 文字在在手机中滚动时闪烁

    最近做一个 文字 横向 滚动的 例子 ,遇到了 几个坑 

    首先分享下 代码:

    var scrollTimer;
    function scrollText(dom,marginWid) {
        var lis = dom.find('li');
        let htmlUl = dom.html();
        let leftW=0;
        lis.length>1 && dom.append(htmlUl);
        let allTextWid = lis.length * (lis[0].offsetWidth + marginWid);
        if(lis.length>1) {
            clearInterval(scrollTimer);
           lis.length && dom.width(lis.length * (lis[0].offsetWidth+marginWid)*2);
            scrollTimer = setInterval(function() {
                leftW-=3;
    
                if(Math.abs(leftW) >=allTextWid) {
                    leftW=0;
                }
                dom.css({'left':leftW});
            },50);
            dom.removeClass('only-one');
        } else if(lis.length==0 || lis.length==1 ){
            dom.addClass('only-one');
        }
    }
    

      

    因为页面中有好几处需要滚动,所以写了一个 统一的函数 ,dom代表滚动的 父节点 ,marginWid代表模块与模块间的间距(如 marget-left.或者marget-right),如果 没有取值为0

    应用: scrollText($userRecord,0);

              scrollText($('#rewardOtherBox'),15);

    但是 页面里有一个 抽奖的 功能,所以每次抽完奖,需要重新渲染页面,这样 如果没有 clearInterval的话 ,就有 多个重影的 滚动,因为之前的 scrollTimer没有被停止。

    坑1 : 重新渲染页面的时候 要 停止 scrollTimer ,

    坑2:   多个滚动 每个 滚动的 scrollTimer 不能一样,不然会受影响

    坑3:  滚动的时候在手机端出现闪动

    添加如下 属性 ,闪动问题解决:

    -webkit-transform: translate3d(0,0,0);
    overflow: hidden;
    backface-visibility: hidden;

    所以 一定要注意 每次滚动重新渲染时 一定要记住 先 清除下 scrollTimer这函数

  • 相关阅读:
    KVM安装之脚本和镜像目录树准备
    KVM安装之网桥
    安装KVM虚拟机步骤
    NFS搭建配置
    为项目组搭建开发测试环境介绍
    VMWare虚拟机copy后网卡不是eth0解决办法
    安装Oracle 10g和SQLServer2008(仅作学习使用VirtualBox虚拟机来安装节省电脑资源)
    常用的SQL语句
    在web项目中集成Spring
    IOC容器装配Bean(注解方式)
  • 原文地址:https://www.cnblogs.com/laneyfu/p/7479132.html
Copyright © 2011-2022 走看看