滚动消息的代码

最新推荐文章于 2021-06-03 04:21:29 发布

wintershan

最新推荐文章于 2021-06-03 04:21:29 发布

阅读量280

点赞数

分类专栏：好好学习天天向上文章标签： CSS UP

好好学习天天向上专栏收录该内容

52 篇文章 0 订阅

订阅专栏

在制作滚动消息时总是遇到这样那样的问题，今天整理归纳一下，以备将来直接使用。

<DIV class="box">
       <marquee scrollamount='1' scrolldelay='10' direction='up' width='180' height='173' οnmοuseοver="this.stop()" οnmοuseοut="this.start()" loop="-1">
        <UL class=lastedList>
            <LI><a href=""> 痴心不改爱国情0</a></LI>
            <LI><a href="">痴心不改爱国情1</a></LI>
            <LI><a href="">痴心不改爱国情2</a></LI>
            <LI><a href="">痴心不改爱国情3</a></LI>
            <LI><a href="">痴心不改爱国情4</a></LI>
            <LI><a href=""> 痴心不改爱国情5</a></LI>
            <LI><a href="">痴心不改爱国情6</a></LI>
            <LI><a href="">痴心不改爱国情7</a></LI>
            <LI><a href="">痴心不改爱国情8</a></LI>
            <LI><a href="">痴心不改爱国情9</a></LI>
            <LI><a href=""> 痴心不改爱国情10</a></LI>
            <LI><a href="">痴心不改爱国情11</a></LI>
            <LI><a href="">痴心不改爱国情12</a></LI>
            <LI><a href="">痴心不改爱国情13</a></LI>
            <LI><a href="">痴心不改爱国情14</a></LI>
            <LI><a href=""> 痴心不改爱国情15</a></LI>
            <LI><a href="">痴心不改爱国情16</a></LI>
            <LI><a href="">痴心不改爱国情17</a></LI>
            <LI><a href="">痴心不改爱国情18</a></LI>
            <LI><a href="">痴心不改爱国情19</a></LI>
        </UL>
        </marquee>
    </DIV>

.box { border:1px solid #CAE99B; border-top:none; padding:15px 0; }
UL.lastedList{ width:150px; margin:0 auto; }/*一定不能定义height*/
.lastedListli { width:138px; height:20px; text-align:left; background:url(/images/arrow.gif) no-repeat 0 5px; padding-left:12px; }

有几点需要着重注意的是marquee的loop要设定无限次循环必须是-1；另外UL的高度一定不能写值，其高度要靠marquee里的height来控制。如果整个BOX一定需要高度，那就把BOX写定高度。

另个，这里的CSS只针对重要的DIV设定了属性，用到具体的地方还得因地制宜为DIV添加CSS的，这个懒偷不了。