从跑马灯说起

1:写在前面

移动端,尤其是手机移动端,因为其区域限制,所能展示的内容是非常有限的,所以对于内容的展示,就变得异常的重要,而有些内容,却无法省略太多,但因其不是很重要的内容,又不能给太大的区域展示,所以这个时候,很多人希望可以以一个跑马灯的形式展示,因为是移动的,也可以顺便吸引一下用户的注意力。

2:原生方法实现

原生的HTML中,有一个跑马灯的实现,就是marquee标签,MSDN中marquee,不过呢,文中也提出了,该标签已经被废弃,虽然目前大多数浏览器还支持。

但既然已经被废弃,就表示在未来会有浏览器放弃支持该标签,尤其是变化快速的移动端浏览器。

不管如何,既然当前还支持,那么我们就先来看看,marquee标签的简单效果吧。

PC端示例:DEMO求临幸

移动端示例:DEMO求临幸

移动端可以扫二维码:

这里只是使用了默认的一种设置,没有做任何的修改,如果想要了解更多关于marquee的,可以直接查看本节开始时的链接哦。

在前面给出的示例中,你有没有发现一个问题,本来这里只是为了展示跑马灯的,但是为什么有一个按钮呢?多点击几次试试哦,这是跑马灯的一个BUG,有这个BUG的存在,所以也就导致了,marquee的使用,受到更多的限制。

而且,您是否也发现,marquee的跑马灯,有一个不好的地方,那就是,它总是在消失之后,才会开始下一轮的播放,那么当中就会出现滚动区为空的时候,这是属于体验不好的一个方面。

所以,在项目中,其实是很少会使用到marquee标签的,也许这就是marquee被废弃的原因吧。

3:JS实现跑马灯

CSS不支持动画的时候,使用JS去实现跑马灯是一个很好的解决方案,甚至现在如果是在PC端使用,而PC端还需要兼容IE7的话,那大部分也是使用JS去实现的,用JS去循环着改变元素的位置即可。

这一小节只是提出这个概念,因为本篇的主要内容是使用CSS3的东西,去实现跑马灯。

虽然现在使用JS去处理这个,依然是一个不错的解决方案。

4:CSS3解决方案

CSS3支持动画之后,毕竟CSS3的动画是浏览器自带的,那边比我们使用JS去实现一个动画引擎,在效率上是高出不少的。

所以,CSS3的动画,开始完成一些之前需要使用JS来做的简单动画,比如这里的跑马灯,

PC端示例:DEMO求临幸

移动端示例:DEMO求临幸

移动端可以扫二维码:

如果在PC端,看到的效果是不是棒棒哒,但是您是否看过移动端在手机上的效果呢?

虽然说,这里没有使用JS,没有很大的计算量,但是却有个问题,就是视觉效果不好,手机上面的二维码,就可以看到效果啦,所以说,这个依然是需要改进的,那么这个是什么原因的呢?

5:CSS3方案总结

直接使用CSS3中的定位来做这个跑马灯,导致了一个问题,这也是在web开发中常见的一个问题,叫做重绘,虽然使用了absolute定位,虽然重绘不会影响其他元素,但是它本身的频繁重绘,依然引起了我们视觉的感应,而看起来就像是一直在闪动,这并不是一个好的体验。

那么有什么方法,可以避免这个频繁的重绘呢?

这个就属于CSS3动画性能方面的问题了,这里不做这个说明,感兴趣的可以去搜索一下“CSS3性能优化”方面的文章,所以,这里我们可以采用另外一种性能更好的方案,那就是配合transform来实现这个。

所以,请看接下来的示例。

6:CSS3配合transform的跑马灯

transform系列,是对元素的变形,它甚至会影响position的属性,所以关于transform的东西,如果要使用的话,还是要慎重考虑的,关于使用方面的问题,不在本篇的讨论范围之内,跳过吧。

PC端示例:DEMO求临幸

移动端示例:DEMO求临幸

移动端可以扫二维码:

是不是变得特别赞了呢?如果您对动画的引擎有过研究的话,那么这里,看到源代码之后,您可以会发现一个问题,然后使用手机测试一下,也可以会看到一个BUG(这个BUG跟手机有关),IOS8没有这个BUGIOS9+有的,Android应该也是跟手机有关,基本就是手机厂商,对于动画引擎的优化导致的吧,或者说,也不算是BUG,只是当您的有动画的页面,进入后台,或者说,不处于激活态时,动画引擎就会处于缓慢(就这么描述吧)状态,以节省浏览器内存。

所以,在本小节的示例,在某些手机,或者PC上,就会出现一个问题,如果在当中,页面进入后台之后,您去其他的应用之后,过了段时间,再返回来的时候,会出现跑马灯重叠的现象(因为这个模拟的跑马灯,是两个元素)。

有兴趣的就试着操作一下吧。

7:终极解决方案,transform的跑马灯

前面的解决方案已经可以了,只是在某些设备,可能会在出现重叠的现象,所以,我们只要解决这个问题,就可以实现一个完美的跑马灯了。

那么重叠有什么更好的解决方案吗?重叠?

必须是两个元素才可以重叠的么,如果我让滚动的元素是一个元素,不就可以完美的避免重叠了吗?

PC端示例:DEMO求临幸

移动端示例:DEMO求临幸

移动端可以扫二维码:

完美~

总结

CSS实现的跑马灯,虽然在性能上,会好一些,但是依然受限很多,比如:如果我们不知道轮播问题的长度,不知道轮播区域的宽度,该如何进行这样的设置呢?

使用translate来做滚动距离的处理,会有两个问题

1:如果元素长度远大于区域长度呢?(translate可以使用百分比,就如第7小节中使用的示例)

2:如果元素长度,小于区域长度呢?(这个时候,translate的取值,最好就使用滚动区域的宽度来处理了,比如remvw等)

如果我们不确定长度呢?所以,虽然CSS3实现跑马灯,对于性能来说,是好的,但是在于可控性方面,就变得有些不那么完美了。

所以,在某些情况下,使用JS来处理这个,还是有必要的。

本篇到此为止。

如果您发现文中有描述错误或者不当的地方,请留言指出,不胜感激,谢谢!

本文属于原创文章,如需转载,请注明出处,谢谢!

本文地址:http://www.zhangyunling.com/?p=691

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

从跑马灯说起》有2个想法

  1. 银弹说道:

    感觉你的博客写得不错嘛,能给个联系方式,认识一下吗。

    1. 谢谢,这个是我的邮箱,zhangyunling@zhangyunling.com,有啥问题,可以交流。