js+html实现大屏公告滚动效果

执键行天涯

已于 2024-08-25 07:25:50 修改

阅读量62

点赞数

分类专栏： Echarts 文章标签： javascript html 开发语言 ecmascript 前端

于 2020-08-20 16:20:00 首次发布

本文链接：https://blog.csdn.net/qq_39666711/article/details/140020558

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果如图；

实现此效果的代码：

color.js

(function($){
    $.fn.myLink = function(options){
        var defaults = {
            'color' : '#333',
            'fontSize' : '14px'
        };
        var settings = $.extend({},defaults,options);

        this.each(function(){
            $(this).append(' ' + $(this).attr('href'));
        });

        return this.css({
            'color': settings['color'],
            'fontSize': settings['fontSize']
        });
        
    };
})(jQuery);

scroll.js

// JavaScript Document
(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:30 //每行的高度
    };
    
    var opts = $.extend({}, defaults, options),intId = [];
    
    function marquee(obj, step){
        obj.find("ul").animate({
            marginTop: '-=1'
        },0,function(){
            //若ul向上移动的距离大于一个li的高度，将第一个li放到末尾去，再将新ul的margin-top设为0
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));    
                    $(this).css("margin-top", '0px');
                }
            });
        }
        
        //$('  ').myScroll
        this.each(function(i){       //this指jQuery对象的实例，也就是#('  ')
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        
        });

    }

})(jQuery);

bulletin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src='js/scroll.js'></script>
    <script type="text/javascript" src='js/color.js'></script>
    <style type="text/css">
        .bcon{
            height: 270px;
            width: 350px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        .bcon .title{
            width: 100%;
            border-bottom: 1px solid #ccc;
            height: 35px;
        }
        .bcon b{ 
            font-size: 16px;
            border-top:2px solid #63B8FF; 
            padding:5px 10px; 
            display:inline-block;
        }
        .bcon a{
            float: right;
            font-size: 14px;
            line-height: 35px;
            color: rgb(170, 170, 170);
            text-decoration: none;
        }
        .bcon a:hover{
            color: #63B8FF; 
        }
        .list_lh{ 
            height: 235px;
            width: 100%;
            overflow:hidden;
        }
        .list_lh ul{
            padding-left: 0px;
            list-style:none;
        }
        .lieven{
            background-color: #eee;
        }
        .list_lh li p{ 
            padding-left: 10px;
            height:30px; 
            line-height:30px;
            margin: 0;
            overflow: hidden;
        }
        .list_lh li p a{ 
            float:left; 
            text-decoration:none;
            color: #333;
            font-size: 14px;
        }
        .list_lh li p a:hover{
            color: #63B8FF; 
        }

    </style>
</head>
<body>
<div class="bcon">
  <div class="title"><b>办件公示</b><a href="#">更多 ></a></div>
  <div class="list_lh">
    <ul>
        <li><p><a target='_blank' href="http://baidu.com">武汉香华林商业发展有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉市海鼎置业有限责任公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉联发瑞盛置业有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉绿地滨江置业有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉联发瑞盛置业有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉泰天工程机械有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉三江航天嘉园房地产开发有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉双龙木业发展有限责任公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉舜安工贸有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">鑫磊博览城有限公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉市江汉区房地产公司</a></p></li>
        <li><p><a target='_blank' href="http://baidu.com">武汉运通置业有限公司</a></p></li>
    </ul>
  </div>  
</div>
    <script type="text/javascript">
       $(function(){
            $("div.list_lh").myScroll({
                speed:40, //数值越大，速度越慢
                rowHeight:30 //li的高度
            });

            $('li:even').addClass('lieven');

            $('ul li a').myLink({
                'color': '#111',
                'fontSize': '13px'
            })
        });
    </script>
</body>
</html>

谢谢这位大神jQuery公告栏文字滚动插件_jq 公告插件-CSDN博客

　　　　　　代码的gitee地址：GitHub - heyue-99/Bulletin-Textscroll: 公告栏文字滚动插件