css跑马灯

css3之前使用js实现

         <div style="padding: 0 1rem;">
                <div id="container_small_tip">
                    <div id="content_small_tip"></div>
                </div>
            </div>    

<script>

function roll(speed=1,fatherselect,select){
    if ($(fatherselect) == null) return;
    var $container = $(fatherselect);//#container_small_tip
    var $content = $(select);//#content_small_tip
    var init_left = $container.width();
    $content.css({ left: parseInt(init_left) + "px" });
    var This = this;
    var time = setInterval(function () {move($container, $content, speed); }, 20);                   //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

    $container.bind("mouseover", function () {
        clearInterval(time);
    });
    $container.bind("mouseout", function () {
        time = setInterval(function () {move($container, $content, speed); }, 20);
    });
    // setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
    return this;
};
function move($container, $content, speed){
    var container_width = $container.width();
    var content_width = $content.width();
    if (parseInt($content.css("left")) + content_width > 0) {
        $content.css({ left: parseInt($content.css("left")) - speed + "px" });
        $content.css({color:"red"})//改变字体颜色
    }
    else {
        $content.css({ left: parseInt(container_width) + "px" });
        $content.css({color:"red"})//改变字体颜色
    }
}

var content = "我是跑马灯；跑马灯是我";
$("#content_small_tip").html(content);
roll(2,"#container_small_tip","#content_small_tip");

</script>

 

 

 

使用css3 animation

 .news-move {
  position: absolute;
  top: 0;
  left: 990px;
  width: 150%;
  animation: move 25s linear 0s infinite normal ;
  cursor: pointer;
}

//鼠标hover跑马灯静止
.news-move:hover {
  animation-play-state: paused;
}