使用css3和js在手机上实现简单的跑马灯效果

情况描述

客户想在手机顶部的nav显示单行文字时,在字数较多,一屏显示不下的情况下,文字可以滚动起来.一开始,我是用的php做了一下字数的判断,如果字数比10个多就添加一个<marquee>标签,来制作这个滚动效果。
选取<marquee>标签这样的方法,主要是考虑到这样是能兼容所有的平台的绝大部分机型的。

这里首先做一个反省,这个问题是要考虑响应问题的,不是随意规定字数;这个问题应该交给js处理而不是php.

接下来,当我以为这样就大功告成的时候,设计部的同事告诉我说,客户要求,在文字可以滚动的情况,滚动文字
的开头要从左端开始向右滚动。但是我在查阅资料后发现,<marquee>标签只能从一端滚动到另一端,不能
设定开始滚动的位置。

好吧,那我只能先踏上寻找解决方案的征程了~~~(偶也)

解决问题的过程

一开始我能想到的首先就是用js来模拟<marquee>标签,但是我我试了几个插件之后都不满意,因为我要实现的仅仅是一个简单的轮播文字的功能,只不过轮播开始的位置的是可以适当调整的.我想到了可以借助css3中的transform、transition外加js就应该可以实现类似的效果。但是在做的过程中发现有的手机不支持transform使用百分比,而且transform属性也会出现在手机上模糊的情况,于是就想到了使用position

成果

经过一番努力,demo如下:
点我查看

html:


<div class="device">
<div class="navTitle marquee">
  <div class="get-marquee-width">
    <div class="marquee-move">
    <!-- 这里的span 仅仅是为了获得问题内容的长度用的,也可以换成其他的行内元素-->
     <span>我是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的标题</span>
    </div>
  </div>
</div>
</div>

css:

/* 假设.device的宽度是设备的宽度*/
.device{
  width:320px;
}
.marquee{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 25px;
}
.marquee > .get-marquee-width{
    position: relative;
}
.marquee> .get-marquee-width > .marquee-move{
    -webkit-animation:  marquee 20s linear 1s infinite;
    -o-animation:  marquee 20s linear 1s infinite;
    animation:  marquee 20s linear 1s infinite;
    position: absolute;
    width:100%;
    padding-left: 50px;
    white-space: nowrap;
}

@-webkit-keyframes marquee {
/*
   
    
*/
    0% { left: 0; }
    5%{left: 0;}
    100% { left: -100%; }
}
@-moz-keyframes marquee {
    0% { left: 0; }
    5%{left: 0;}
    100% { left: -100%; }
}
@-o-keyframes marquee {
    0% { left: 0; }
    5%{left: 0;}
    100% { left: -100%; }
}
@keyframes marquee {
    0% { left: 0; }
    5%{left: 0;}
    100% { left: -100%; }
}

js:

$(function(){
  $(".marquee>div").width($("span").width());//js这里主要获取到滚动内容的宽度就可以了
});

demo

PS:

之前主要是使用js去控制类的切换,以及循环,现在看起来就很蠢的办法,现在主要是用了css的办法,兼容性也更好一点
在css中有这样的写法,0% { left: 0; } 5%{left: 0;} 这样的写的目的是每次动画之前都有5%(1s)左右的延迟，虽然animation提供了animation-delay但是它只是在动画的第一次的时候起作用
测试过程中发现,好像有的手机浏览器不支持在@keyframes中from{left:50px}to{left:-100%}这样的写法,两个赋值的方式不同的话是不支持的,所以无奈只能让left从0开始了

opencode给我启发的例子:
点我查看

使用css3和js在手机上实现简单的跑马灯效果