滚动新闻列表

最新推荐文章于 2025-03-19 12:09:23 发布
最新推荐文章于 2025-03-19 12:09:23 发布
阅读量839 收藏 5
点赞数 1
分类专栏： 简单插件、小功能 文章标签： 新闻列表 滚动 bootstrap

基于bootstrap的滚动新闻列表

为了完成我每日一篇博客的目标，我就转载了，哎，这个滚动列表还不错，习惯了用bootstrap写一些响应式网站，所以用这个很是方便
这里写图片描述
这里写图片描述

  • 代码
<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>基于bootstrup的响应式jQuery滚动新闻插件</title>

    <link rel="stylesheet" type="text/css" href="css/normalize.css" />

    <link rel="stylesheet" type="text/css" href="css/default.css">

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

    <link href="css/site.css" rel="stylesheet" type="text/css" />

    <!--[if IE]>

        <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>

    <![endif]-->

</head>

<body>

    <div class="htmleaf-container">

        <header class="htmleaf-header bgcolor-10">

            <h1>基于bootstrup的响应式jQuery滚动新闻插件 <span>A Responsive jQuery News Ticker Plugin with Bootstrap</span></h1>



        </header>

        <div class="container mp30">

            <div class="row">

                <div class="col-md-4">

                    <div class="panel panel-default">

                        <div class="panel-heading">

                            <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>

                        <div class="panel-body">

                            <div class="row">
                                <div class="col-xs-12">

                                    <ul class="demo1">

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/1.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/2.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/3.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/4.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/5.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/6.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                        <li class="news-item">

                                            <table cellpadding="4">

                                                <tr>

                                                    <td><img src="images/7.png" width="60" class="img-circle" /></td>

                                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>

                                                </tr>

                                            </table>

                                        </li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                        <div class="panel-footer">



                        </div>

                    </div>

                </div>



                <div class="col-md-4">

                    <div class="panel panel-default">

                        <div class="panel-heading">

                            <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>

                        <div class="panel-body">

                            <div class="row">

                                <div class="col-xs-12">

                                    <ul class="demo2">

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>

                                        <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>



                                    </ul>

                                </div>

                            </div>

                        </div>

                        <div class="panel-footer">



                        </div>

                    </div>

                </div>



                <div class="col-md-4">

                    <div class="panel panel-default">

                        <div class="panel-heading">

                            <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>

                        <div class="panel-body">

                            <div class="row">

                                <div class="col-xs-12">

                                    <ul id="demo3">

                                        <li class="news-item">Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna accumsan,

                                            rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>

                                        <li class="news-item">Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna accumsan,

                                            rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>

                                        <li class="news-item">Praesent ornare nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula

                                            volutpat laoreet vel, consequat eu mauris. <a href="#">Read more...</a></li>

                                        <li class="news-item">Nunc ultrices tortor eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc

                                            et imperdiet magna. Mauris sed eros nulla. <a href="#">Read more...</a></li>

                                        <li class="news-item">Morbi sodales tellus sit amet leo congue bibendum. Ut non mauris eu neque fermentum

                                            pharetra. <a href="#">Read more...</a></li>

                                        <li class="news-item">In pharetra suscipit orci sed viverra. Praesent at sollicitudin tortor, id sagittis

                                            magna. Fusce massa sem, bibendum id. <a href="#">Read more...</a> </li>

                                        <li class="news-item">Maecenas nec ligula sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor

                                            nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. <a href="#">Read more...</a></li>

                                        <li class="news-item">Onec bibendum consectetur diam, nec euismod urna venenatis eget. Cras consequat

                                            convallis leo. <a href="#">Read more...</a> </li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                        <div class="panel-footer">



                        </div>

                    </div>

                </div>

            </div>

        </div>



    </div>



    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js" type="text/javascript"></script>

    <script src="js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function () {

        $(".demo1").bootstrapNews({

            newsPerPage: 1,

            autoplay: true,

            pauseOnHover:true,

            direction: 'up',

            newsTickerInterval: 4000,

            onToDo: function () {

                //console.log(this);

            }

        });



        $(".demo2").bootstrapNews({

            newsPerPage: 4,

            autoplay: true,

            pauseOnHover: true,

            navigation: false,

            direction: 'down',

            newsTickerInterval: 2500,

            onToDo: function () {

                //console.log(this);

            }

        });



        $("#demo3").bootstrapNews({

            newsPerPage: 3,

            autoplay: false,



            onToDo: function () {

                //console.log(this);

            }

        });

    });

</script>

</body>

</html>
Javascript实现列表中列的滚动效果
秘密基地
08-06 3852
经常在访问网页的时候，会发现有那种列表的滚动展示新闻或者网站消息的动态列表栏。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表滚动效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } div{
jquery垂直向上逐条滚动新闻列表
06-10
标题中的“jquery垂直向上逐条滚动新闻列表”指的是使用jQuery库实现的一种常见网页动态效果，这种效果常见于新闻网站，能够使最新的新闻标题或摘要从屏幕底部向上滚动，以吸引用户的注意力并展示更多信息。...
js实现新闻列表连续的滚动效果
08-26
通过js实现的新闻列表的滚动效果 效果为连续滚动
循环滚动列表
qq_35647121的博客
12-05 633
当Item数量很多的时候，可以使用循环列表提高性能 找到控件 缓存列表，为了减少getcomponent的调用，避免每次滑动都去找 最多找10次就可以了，而不需要找100次getcomponent 循环列表先把旧的监听全部移除，然后再添加监听 清空缓存 ...
vue 自制列表，循环滚动
最新发布
gaowxx的博客
03-19 498
vue 自定义列表 超出范围自动循环滚动
新闻列表 滚动特效
IT界の小丑的专栏
07-12 1465
 １上下滚动：代码：这里是文字代码：从２开始２、向上移动的文字向上移动的文字 ３、向下移动的文字向下移动的文字 ４、向左移动的文字向左移动的文字 ５、向右移动的文字向右移动的文字 ６、由中间向两边移动的文字和图像 由中间向两边移动的文字和图像 由中间向两边移动的文字和图像 ７、来回走动的文字 来回走动的文字 ８、波浪式的文字 波浪式的文字 ９、左右运动的文字 左右运动的文字左右运动的文字 １０、其
循环滚动列表 - scrollBy
抄经书的程序猿
03-14 1383
前几天做列表循环滚动的功能，记录一下。 思路： 正常思路，把滚动列表的第一个元素，接到列表的最后一位，每隐藏一条就在最后一位接上，如此循环； 今天咱们来聊更简单一些的思路，不需要操作每一条元素，但是需要复制一次整体的列表。 要点： 需要用到 scrollTo ，scrollBy 定位；用scrollHeight ，offsetHeight判断。 向左滚动时把scrollTo 换成scrollLeft，调试代码即可。 原生代码如下： 关键点在于，当滚动内容超出窗口高度的..
jQuery循环滚动新闻列表示例代码
10-25
### jQuery循环滚动新闻列表的技术实现 #### 1. 基础概念 - **jQuery**: jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量，简化了JavaScript编程。 ...
基于jquery的滚动新闻列表
10-29
1. jQuery滚动新闻列表的实现：文档中提到通过使用jQuery插件来实现滚动新闻的功能。这是Web前端开发中常见的一种动态内容展示方式，特别适用于需要持续更新的新闻、通知、广告等信息的显示。 2. jquery.vticker-...
html滚动新闻html滚动新闻
12-07
这是你的滚动新闻内容 ``` 这里的`behavior="scroll"`设置滚动方式为滚动，`direction="left"`表示内容从右向左滚动。虽然这种方法简单易用，但因为`<marquee>`是非标准标签，已被废弃，不推荐在现代网页设计中使用...
jquery垂直向上逐条滚动新闻列表.rar
09-05
《使用jQuery实现垂直向上逐条滚动新闻列表》 在网页设计中，动态效果常常能吸引用户的注意力，提高用户体验。其中，新闻列表的垂直向上逐条滚动是一种常见的动态展示方式，可以使得信息更新更加生动。本篇文章将...
JS滚动列表加载
12-01
参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:undefined,func:function(){},loadingMustTime:0,loadingDom:function(){},loadedDom:function(){},nullDataFunc:function(){},endFunc:function(){},errorFunc:function(){}}); id：滚动条id，不可以是body； id2：滚动列表的id，通过function自行根据情况返回； action：数据来源的ajax地址，插件会自动加上page和length(分别表示请求页数和当前已有记录数)，返回格式统一是[{},{}...]，此类jsonArray； ajaxType：ajax提交方式，将更改传递数据的方式，默认post； pageNum：每页加载数量，将会根据这个数量判断是否全部加载完成； getNew：自定义获取数据方法； funcArg：自定义获取数据时传递的参数，类型为函数，返回所需参数； childrenTag：列表子项的标签，默认LI； func：非自定义获取数据时，创建每行数据的方法； loadingMustTime：强制最小加载时间，默认0； loadingDom：加载中动画自定义，返回Dom或者HTML代码； loadedDom：完全加载完成动画自定义，返回Dom或者HTML代码； nullDataFunc：数据列表为空时执行的方法； endFunc：每页数据加载完成时执行的方法； errorFunc：ajax获取数据失败时调用的方法。 回调方法 调用本方法初始化后将会得到一个专属的方法集： Object {getNew:function,isFull:function,isRunning:function,isStop:function,loading:function,show:function}; getNew()：忽略判断条件，强制执行加载操作。此时数据传递中,page值可能出错，但length值一定正确，请谨慎判断后在执行该方法； isFull(boolean)：修改列表加载完成标志。true为全部加载完成，false则相反； isRunning(boolean)：修改列表当前是否正在加载中标志。几乎没有使用的机会； isStop(boolean)：设置是否停止加载，设置为true时将会阻止未来的所有加载操作； loading()：根据当前滚动条的位置，自动判断是否需要加载新数据； show(boolean,boolean)：强制设置加载中和加载完成dom的显示或隐藏，true表示显示，false相对。
基于Bootstrap的垂直滚动新闻特效
07-06
基于Bootstrap的垂直滚动新闻特效
间歇性循环滚动新闻。从下往上滚动。
08-02
间歇性循环滚动新闻。从下往上滚动。有在线demo
bootstrap文字上下滚动，类似新闻滚动
01-10
本文档适用于list-group+list-group-item组合形式，但不适合在item中再次放置col样式，该问题本人暂时未解决，有解决方法请及时告知本人。
滚动列表实现
qq_34695703的博客
11-16 1426
1. 效果图 2. 文件结构 jquery 文件：链接: https://pan.baidu.com/s/1GdW7PfcFo_Pf9c_hRKiaCw 提取码: nqq1 复制这段内容后打开百度网盘手机App，操作更方便哦 3. index.html 基础结构 4. CSS样式 5. JS 逻辑 // 模拟数据 let dataList = [ { name: '张一山' },{ name: '王晓义' },{ name: '李光洁' },{ name: '张雨绮' }
上下滚动列表
weixin_30872157的博客
11-14 349
HTML <div class="box" id="box"> <a href="javascript:;" class="top"></a> <ul></ul> <a href="javascript:;" class="bottom"></a> </div> CSS...
虚拟滚动列表
weixin_43294560的博客
11-09 1253
刷新前:虽然定位的位置和内容变了,但是展示的内容是不变的,所以刷新能和上次滑动状态视觉效果一致。
列表无限滚动（虚拟列表）
编码世界
09-23 1644
列表无限滚动考虑两点：1.数据太多，要做虚拟列表2.下拉到底，继续加载数据并拼接之前的数据。
bootstrap滚动新闻列表
01-23
### 使用 Bootstrap 创建滚动新闻列表 为了实现带有滚动效果的新闻列表，可以利用 `div` 容器并结合 CSS 的溢出属性来控制内容显示区域的高度以及开启垂直方向上的自动滚动条。下面是一个简单的 HTML 和 CSS 组合的例子，其中还包含了来自 Bootstrap 类库的一些样式以增强外观。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Scrollable News List</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <style type="text/css"> .news-scroll { max-height: 200px; /* 设置最大高度 */ overflow-y: auto; /* 当内容超出容器时启用纵向滚动条 */ } </style> </head> <body> <div class="container mt-5"> <h3 class="mb-4">最新消息</h3> <!-- 滚动框 --> <div class="card news-scroll border-primary mb-3"> <ul class="list-group list-group-flush"> <li class="list-group-item">第一条新闻标题...</li> <li class="list-group-item">第二条更长一点的消息内容这里展示给用户看。</li> <li class="list-group-item">第三条新闻标题...</li> <li class="list-group-item">第四条新闻标题...</li> <li class="list-group-item">第五条新闻标题...</li> <li class="list-group-item">第六条新闻标题...</li> <li class="list-group-item">第七条新闻标题...</li> <li class="list-group-item">第八条新闻标题...</li> <li class="list-group-item">第九条新闻标题...</li> <li class="list-group-item">第十条新闻标题...</li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> </body> </html> ``` 上述代码片段定义了一个具有固定最大高度 `.news-scroll` 的 div 元素，并通过设置其 `overflow-y:auto` 属性使得当内部的内容超过这个设定的最大高度时会出现竖直方向上的滚动条[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值