超出跑马等效果
老的前端开发人员对于marquee标签肯定不陌生,一个被淘汰的标签,被刚入门的新手所喜爱,因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时,使这个标签退出历史舞台,大家纷纷改用js来实现无间断滚动等效果。
新的CSS3 marquee设置,可以说功能强大了很多,更加易操作,用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。
对于这个属性的定义,W3C标准用法和webkit内核浏览器的支持用法并不相同,由于我们立足实战实用,所以这里只介绍好用的。可用的。
我们需要四句常用命令:
overflow:-webkit-marquee;//指定溢出时滚动。
-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式,分三种。scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。
-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数,infinite 为无限多次,不结束。或者可以用正整数设置滚动的次数。
-webkit-marquee-direction:up | down | left | right; //跑动的方向,这个要注意结合实际情况,即实际你操作的标签文本流溢出在哪个方向溢出。
-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。