在写前端界面时，公告栏会常有，文字水平滚动的效果就会用到。要达到这种效果有两种方式。

其一，使用<marquee>标签：

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">这是一个完整的例子</marquee>

• behavior: 设定滚动的方式：

• bgcolor: 设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。

• direction:设定滚动的方向。

• hspace：设定活动字幕里所在的位置距离父容器水平边框的距离

• vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离

• scrollamount：设定活动字幕的滚动速度

• scrolldelay：设定活动字幕滚动两次之间的延迟时间

其二，就得靠js了：

HTML代码：

<div class="box">

<div class="winBox">

<ul class="scroll">

<li> <a href="#">1111</a> </li>

<li> <a href="#">2222</a> </li>

<li> <a href="#">4444</a> </li>

<li> <a href="#">8888</a> </li>

<li> <a href="#">7777</a> </li>

<!--给所要的内容复制一份-->

<li> <a href="#">1111</a> </li>

<li> <a href="#">2222</a> </li>

<li> <a href="#">4444</a> </li>

<li> <a href="#">8888</a> </li>

<li> <a href="#">7777</a> </li>

</ul>

</div>

</div>

CSS代码：

* {

padding: 0;

margin: 0;

font-family: "微软雅黑";

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

.box {

padding-left: 50px;

margin-top: 100px;

margin-left: 100px;

}

.winBox {

width: 900px;

height: 40px;

overflow: hidden;

position: relative;

background: pink;

}

.scroll {

/*width的大小是根据下面li的长度和多少个li而定的，需注意！*/

width: 1500px;

position: absolute;

right: 0px;

top: 0px;

}

.scroll li {

width: 150px;

float: left;

line-height: 40px;

text-align: center;

}

JS代码：

$(function() {

var num = 0;

function goLeft() {

//750是根据你给的尺寸，可变的

if(num == -750) {

num = 0;

}

num -= 1;

$(".scroll").css({

right: num

})

}

//设置滚动速度

var timer = setInterval(goLeft, 20);

//设置鼠标经过时滚动停止

$(".box").hover(function() {

clearInterval(timer);

},

function() {

timer = setInterval(goLeft, 20);

})

})

首先html布局：先用一个大的div包住内容ul，其中div要设置属性overflow：hidden（把超出的部分隐藏），ul中要有两份相同的li，用于实现循坏滚动并要让li向左或向右浮动。

其次实现移动：可以控制left或margin-left属性取值控制整个ul滚动。

最后：设置定时器控制时间；left或者margin-left取值控制距离；用if语句与变量=0控制循环。