[前端] 文字垂直滚动+鼠标悬停效果

来源：互联网发布：智能家庭解决方案知乎编辑：程序博客网时间：2024/05/29 19:59

文字垂直滚动效果，主要运用了setInterval(function(){}, time);方法。

效果就是一行一行向上滚动。。。。

CSS样式：

<style>    .recommend-info {        width: 630px;        height: 42px;        padding: 0 10px;        margin-top: 12px;        margin-bottom: 18px;        border: 1px dashed #DFDFDF;        overflow: hidden;    }    .recommend-info li {        overflow: hidden;        font-size: 14px;        line-height: 42px;    }    .recommend-info li .push {        float: left;        display: inline-block;        width: 18px;        height: 17px;        margin-top: 12px;        margin-right: 10px;        background: #D95B4E;        font-size: 12px;        color: #fff;        text-align: center;        line-height: 17px;    }    .recommend-info li a {        float: left;        color: #333;    }    .recommend-info li a:hover {        color: #da5c4f;    }    .recommend-info li .htype {        float: right;        color: #999;    }</style>

HTML布局:

<ul class="recommend-info">    <li>        <span class="push">荐</span>        <a href="javascript:;">1高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>        <span class="htype">66万   3室2厅1卫  120㎡</span>    </li>    <li>        <span class="push">荐</span>        <a href="javascript:;">2高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>        <span class="htype">66万   3室2厅1卫  120㎡</span>    </li>    <li>        <span class="push">荐</span>        <a href="javascript:;">3高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>        <span class="htype">66万   3室2厅1卫  120㎡</span>    </li>    <li>        <span class="push">荐</span>        <a href="javascript:;">4高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>        <span class="htype">66万   3室2厅1卫  120㎡</span>    </li></ul>

JS脚本:

<script>    // 不断把新的第一个追加到后面     function vscroll() {        var frtEle = $('.recommend-info li:first');        frtEle.animate({'marginTop': -$('.recommend-info li').height()}, 500, function(){            frtEle.css('marginTop', 0);            $('.recommend-info').append(frtEle);        });    }    var startInterval = setInterval(vscroll, 3000);    // 鼠标悬停     $('.recommend-info li').hover(function(){        clearInterval(startInterval);    }, function(){        startInterval = setInterval(vscroll, 3000);    });</script>

谢谢关注！

0 0