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

来源：互联网发布：linux tomcat 编辑：程序博客网时间：2024/05/10 02:19

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" 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 （多种效果）

0 0