Open mishe opened 8 years ago
在手机端实现跑马灯效果,可以直接使用css3实现;
具体代码实现:
scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。 slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。(ios实测和scroll一致) alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。 跑马灯跑的次数:-webkit-marquee-repetition:infinite | number infinite 为无限多次,不结束。或者可以用正整数设置滚动的次数。
scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。 slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。(ios实测和scroll一致) alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。
infinite 为无限多次,不结束。或者可以用正整数设置滚动的次数。
*跑动的方向:-webkit-marquee-direction:up | down | left | right;
*跑动的速度: -webkit-marquee-speed:slow | normal | fast;
目前在安卓上还有点兼容问题,只兼容v4.4.4以后的版本,之前的版本请用marquee标签代替
<marquee> 标签以 CSS 的方式延续了生命,哈哈。
<marquee>
在手机端实现跑马灯效果,可以直接使用css3实现;
具体代码实现:
*跑动的方向:-webkit-marquee-direction:up | down | left | right;
*跑动的速度: -webkit-marquee-speed:slow | normal | fast;