荆轲刺秦王
活动中需要对中奖记录进行公示,就像这样:
具体的数据是从后台传到前台的html页面的,具体是这样:
<div class="header"> <div class="zhongjiang" style="position: relative;white-space: nowrap;overflow: hidden; padding-left:5em;"><span style="width: 5em; position: absolute;left:0;top:0;background-color:#ffac33;z-index: 100;">中奖公示:</span> <div style="position: absolute;top:0;height:100%;" id="zjbox"><p> <volist name="loList" id="vo"> {$vo.nickname}获得{$vo.prize} </volist> </p></div></div> </div>
想要达到上图中我们想要的样式,就需要使用到 css 中的 animation 了:
因为我们想要它在一行内来回循环播放,所以要用到:white-space:nowrap;
接下来就是重头戏 animation 了:animation:loop 20s linear infinite;
看教程给的标准语法:
接下来我们对:animation-name 进行移动规则定义:
@-webkit-keyframes loop { 0%{margin-left: 0%;} 100%{margin-left: -100%;} } @-o-keyframes loop { 0%{margin-left: 0%;} 100%{margin-left: -100%;} } @-moz-keyframes loop { 0%{margin-left: 0%;} 100%{margin-left: -100%;} } @-ms-keyframes loop { 0%{margin-left: 0%;} 100%{margin-left: -100%;} }
有一点需要注意的是:这个时间的设定:animation-duration ,因为我们轮播的数据是从后台传过来的,所以需要注意这个数据的量,因为如果是很少的数据,在一定时间内轮播完,页面效果就会显得很慢,但如果是非常多的数据,在同等时间内,轮播的速度是非常快的,这和后台传过来的数据量有关,我的解决办法是:在从数据库查询的时候加一个 limit 分页,这样我每次都只查询出十条数据,在根据 id 进行降序排序,这样一来就固定了数据量,不用担心轮播速度失控的问题了。