js实现文字上下滚动效果

最新推荐文章于 2024-06-19 14:56:38 发布

Syspan

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量1.1k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_40729514/article/details/104057819

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

不说了直接上代码，整体效果自己保存下来运行查看吧，整体不错的一款。

学习使用

<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>

运行截图:

感谢还不错，收藏一下！

Syspan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现文字上下滚动效果

不说了直接上代码，整体效果自己保存下来运行查看吧，整体不错的一款。学习使用<html><head> <title>js实现文字上下滚动效果</title> <style type="text/css"> #flinks{width:500px;} /* 文字上下滚动 *...
复制链接

扫一扫