文字垂直滚动+鼠标悬停效果丨技术开发分享录

效果：每 3 秒执行一次切换（一行一行向上滚动），丝滑顺畅，适合公告、推荐等信息展示
<!DOCTYPE html>
<html>
<head>
    <title>文字垂直滚动+鼠标悬停效果</title>
    <script type="text/javascript" src="https://fenxianglu.cn/vendor/jquery.min.js"></script>
    <style type="text/css">
        .recommend-info {
            width: 630px;
            height: 42px;
            padding: 0 10px;
            margin-top: 12px;
            margin-bottom: 18px;
            border: 1px solid #dfdfdf;
            overflow: hidden;
        }
        .recommend-info li {
            font-size: 14px;
            line-height: 42px;
            overflow: hidden;
        }
        .recommend-info li .push {
            float: left;
            display: inline-block;
            width: 18px;
            height: 17px;
            line-height: 17px;
            margin-top: 12px;
            margin-right: 10px;
            background: #d95b4e;
            font-size: 12px;
            color: #fff;
            text-align: center;
        }
        .recommend-info li a {
            float: left;
            color: #333;
        }
        .recommend-info li .htype {
            float: left;
            color: #999;
        }
    </style>
</head>
<body>
    <ul class="recommend-info"> 
        <li>
            <span class="push">荐</span>
            <a href="javascript:;">1 高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>
            <span class="htype">66万 3室2厅1卫 120m²</span>
        </li>
        <li>
            <span class="push">荐</span>
            <a href="javascript:;">2 高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>
            <span class="htype">66万 3室2厅1卫 120m²</span>
        </li>
        <li>
            <span class="push">荐</span>
            <a href="javascript:;">3 高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a>
            <span class="htype">66万 3室2厅1卫 120m²</span>
        </li>
    </ul>

    <script type="text/javascript">
        function vscroll() {
            var frtEle = $('.recommend-info li:first');
            frtEle.animate({'margin-top': -$('.recommend-info li').height()}, 500, function() {
                frtEle.css('margin-top', 0);
                $('.recommend-info').append(frtEle);
            })
        }
        var startInterval = setInterval(vscroll, 3000);

        // 鼠标悬停
        $('.recommend-info li').hover(function() {
            clearTimeout(startInterval);
        }, function() {
            startInterval = setInterval(vscroll, 3000);
        });
    </script>
</body>
</html>
文字垂直滚动+鼠标悬停效果

猜你想看
