文字水平滚动(跑马灯)——方法2

 

Html：

.marquee-wrap {
  width:1050px;
  height:58px;
  line-height:58px;
  background: url(../images/newindex/notice.png) no-repeat;
  border:1px solid #000;
  margin:0 0 10px 0;
  
  position: relative;
  overflow: hidden;
  text-align:center; 
}
.marquee-wrap .marquee {
  position: absolute;
  height: 58px;
  white-space:nowrap;
  font-size:20px;
  font-weight:bold;
  color:#231f20; 
}
.marquee-wrap .marquee div {
  float: left;
  white-space: nowrap;
  padding: 0 60px;
}

<div class="marquee-wrap">

<div class="marquee" id="marquee">
<div>Due to our warehouse move, we are pausing our deliverised only on June 27th</div>
</div>

</div>

Js：

//跑马灯
    var nWidth=$("#marquee div:first").outerWidth();
    $("#marquee div").clone().appendTo($("#marquee"));
    $("#marquee").width(nWidth*2+ 4*60);  //加上四周padding值
    var n=0;
    var nStep=parseInt($(".marquee-wrap").width());
    var nWidth=parseInt($("#marquee").width());
     
    $(".speaker").css("opacity",1);
    setInterval(function(){
            var nLeft=Math.abs(parseInt($("#marquee").css("left")));
             //console.log(nLeft+" - "+nWidth/2);
            if(nWidth-nLeft>=nStep){
                   if(nLeft>=nWidth/2){
                        $("#marquee").css("left",0);
                        n=0;
                   }else{
                        $("#marquee").css({left:-n});
                        n+=1;  
                   }
            }else{
                  $("#marquee").css("left",0);
                  n=0;    
             }
    },20);

    setTimeout(function(){$(".marquee-wrap").slideUp();},30000);  //毫秒单位，显示30s后消失
    //----------------------------------------------------------

MSClass插件：http://www.popub.net/script/MSClass.html （多种效果）