使用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给我启发的例子: 点我查看