js實現文字上下滾動效果

時間 2019-11-08

原文原文鏈接

你們都知道，作html頁面時，爲了提高網頁的用戶體驗，咱們須要在網頁中加入一些特效，好比單行區域文字上下滾動就是常常用到的特效。以下圖示效果：javascript

<html>
<head>
    <title>js實現文字上下滾動效果</title>
    <style type="text/css">
        #flinks{width:500px;}
    
        /* 文字上下滾動 */
        .scroll-box{position:relative;top:0;overflow:hidden;padding:0 10px;display:inline-block;height:29px;line-height:29px}
        .scroll-box.on{background:#fff;z-index:2;overflow:auto;height:auto !important;box-shadow:1px 1px 10px #888}
        .scroll-box.on li{top:0 !important;border-bottom:1px dotted #ccc}
        .scroll-box li{position:relative;}
        .scroll-box a{display:inline-block;white-space:nowrap;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
        .scroll-mask{z-index:1;display:none;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background-color:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)}
        .scroll-mask.on{/*display:block;*/}
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        
        (function ($) {
            /* 單行文字上下滾動 */
            $.fn.adScroll = function (options) {
                // 默認配置
                var scrollOptions = {
                    interval: 6000
                };
                $.extend(scrollOptions, options);
 
                $(this).each(function () {
                    var scrollObj = $(this);
                    // 單行內容無需滾動顯示，取消初始化
                    var totalHeight = 0;
                    scrollObj.find('li').each(function () { totalHeight += $(this).height() });
                    var liSize = Math.round(totalHeight / scrollObj.height());
                    if(liSize <= 1) return;
                    
                    // 初始化開始
                    scrollObj.attr('index', '0');
                    // 重置滾動容器高度
                    scrollObj.height(scrollObj.find('a').outerHeight(true));
                    // 重置滾動項 li 高度
                    scrollObj.find('li').size() > 1 && scrollObj.find('li').height(scrollObj.height());
                    // 外層容器，輔助定位
                    var containerObj = $('<div>').height(scrollObj.outerHeight(true));
                    scrollObj.wrap(containerObj);
                    // 遮罩層
                    var maskObj = $('<div>').addClass('scroll-mask');
                    scrollObj.after(maskObj);
 
                    setInterval(function () {
                        if (!scrollObj.hasClass('on')) {
                            // 全部 li 高度之和除以容器高度
                            var liTotalHeight = 0;
                            scrollObj.find('li').each(function () { liTotalHeight += $(this).height() });
                            var size = Math.round(liTotalHeight / scrollObj.height());
                            var curIndex = parseInt(scrollObj.attr('index'));
                            var next = curIndex + 1 >= size ? 0 : curIndex + 1;
                            if (next == 0) {
                                scrollObj.find('li').animate({ top: 0 }, 'slow');
                            } else {
                                scrollObj.find('li').animate({ top: '-=' + scrollObj.height() }, 'slow');
                            }
                            scrollObj.attr('index', next);
                        }
                    }, scrollOptions.interval);
 
                    // 滾動列表能夠被展開
                    if(scrollObj.hasClass('box-expand')) {
                        // 切換
                        scrollObj.mouseover(function () {
                            scrollObj.css('top', scrollObj.find('li').css('top'));
                            scrollObj.addClass('on');
                            maskObj.addClass('on');
                        }).mouseout(function () {
                            scrollObj.css('top', 0);
                            scrollObj.removeClass('on');
                            maskObj.removeClass('on');
                        });
                    }
                });
            };
        })(jQuery);
        
        $(function(){
            if ($('.scroll-box').size() > 0) {
                $('.scroll-box').adScroll({interval: 2000});
            }
        })
 
    </script>
</head>
<body>
    <h1>js實現文字上下滾動效果</h1>
    <h2>文字滾動示例一：</h2>
    <p>適用於單行區域文字或圖片上下滾動廣告</p>
    <ul class="scroll-box box-expand">
        <li><a href="#" target="_blank">雙十一大額優惠券，領券折上折！</a></li>
        <li><a href="#" target="_blank" >※ 新人福利社，超級好貨0元購 ※</a></li>
        <li><a href="#" target="_blank">韓都衣舍，閨蜜衣櫥 — 天貓女裝銷量冠軍</a></li>
        <li><a href="#" target="_blank" >20181031期福利紅包，訂單提交時抵現使用</a></li>
        <li><a href="#" target="_blank">淘寶網優惠，官方活動一網打盡</a></li>
    </ul>
    
    <h2>文字滾動示例二：</h2>
    <p>適合於單行區域友情連接上下滾動</p>
    <ul id="flinks" class="scroll-box">
        <li>
            <a href="#" target="_blank">友情連接1</a>
            <a href="#" target="_blank">友情連接2</a>
            <a href="#" target="_blank">友情連接3</a>
            <a href="#" target="_blank">友情連接4</a>
            <a href="#" target="_blank">友情連接5</a>
            <a href="#" target="_blank">友情連接6</a>
            <a href="#" target="_blank">友情連接7</a>
            <a href="#" target="_blank">友情連接8</a>
            <a href="#" target="_blank">友情連接9</a>
            <a href="#" target="_blank">友情連接10</a>
        </li>
    </ul>
</body>
</html>