使用jquery.scrollLeft实现文字水平滚动

一开始使用$("").css(“margin-left",num--)

但是这种方法经常会有一种卡顿的感觉，遂优化

使用jquery.scrollLeft优化后：

    
    
    
    



    

        我寄愁心与明月，随君直到夜郎西。 (=・ω・=)
        我寄愁心与明月，随君直到夜郎西。 (=・ω・=)
    

使用css动画再次迭代

2019.2.7更新：使用jquery.scrollLeft仍有卡顿感，遂使用CSS动画来代替JS

    .info_swiper p{
        display: inline-block;
        animation: 20s wordsLoop linear infinite normal;

    }
    /*文字滚动CSS动画-开始*/
    @keyframes wordsLoop {
            0% {
                transform: translateX(0);
                -webkit-transform: translateX(0);
            }
            100% {
                transform: translateX(-56.8%);
            }
        }







        

            

                aaaaaaa
                aaaaaaa
            
            
        

⬆️将a标签全部放入p标签中，然后对p元素进行动画循环（向左移动56.8%，因为后面显示的是重复内容，在文字跟初始状态重叠时结束动画并再次执行）

解决ios下动画结束时闪烁的问题

对于小白来讲修改问题永远都会出现新问题，使用css动画循环后发现在ios设备上，动画结束时会闪烁一下，上网查了一下，可以使用        -webkit-backface-visibility: hidden;      和   -webkit-transform-style: preserve-3d;
来解决闪烁问题。

注意：这行代码最好加在父容器的所有子元素上，否则可能会失效（博主亲测...）

    .info_swiper *{
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
    }

解决问题时参考的文档：https://blog.meathill.com/js/phonegap-js/fix-page-flash-in-ios-webkit.html