分享一款基于jQuery实现滚动新闻代码下载。这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div class="htmleaf-container">

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

            <h1>基于jQuery实现滚动新闻代码下载</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="data: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="data: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="data: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="data: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="data: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="data: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="data: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>

via：http://www.w2bc.com/Article/38303

基于jQuery实现滚动新闻代码下载的更多相关文章

  1. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  2. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  4. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 一款基于jQuery的热点新闻Tab选项卡插件

    今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分 ...

  6. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  7. jQuery循环滚动新闻列表

    最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  9. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

随机推荐

  1. Jquery对input file控件的onchange事件只生效一次的解决方案

    1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑 ...

  2. bootstrap-datepicker限定可选时间范围

    此项目是 bootstrap-datetimepicker 项目 的一个分支,原项目不支持  Time 选择. 其它部分也进行了改进.增强,例如 load 过程增加了对 ISO-8601 日期格式的支 ...

  3. 自定义 iPhone 铃声

    1.iPhone 铃声格式 iPhone 的来电铃声时长限制为 40 秒,短信铃声时长限制为 25 秒,且 iOS5 及以上的系统才支持 m4r 格式的短信铃声. 2.自定义 iPhone 铃声 1) ...

  4. 安卓sdk安装慢解决办法

    1.上图SDK Manager 的 Tools ->Options打开SDK Manager的Settings, 选中“Force https://… sources to be fetched ...

  5. 【转】Swift 语言的设计错误

    Swift 语言的设计错误 在『编程的智慧』一文中,我分析和肯定了 Swift 语言的 optional type 设计,但这并不等于 Swift 语言的整体设计是完美没有问题的.其实 Swift 1 ...

  6. markdown中的锚点处理

    markdown markdown是一个相对简单的DSL,定义了简单的标签来描述html文档格式. 比如: #一级标题 来生成html <h1>一级标题<h1> ##二级标题 ...

  7. android安卓系统上运行jar文件

    原文链接: http://blog.sina.com.cn/s/blog_658c8cea0101mdhp.html 步骤如下: 1. 将文件打包成可执行jar文件(可在eclipse里export) ...

  8. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  9. oracle 定时任务例子【项目例子】

    说明:请在plsql工具的命令窗口中,依次按步骤执行如下脚本   (1)建立备份表 my_test_log2create table my_test_log2 as select * from my_ ...

  10. 【转载并整理】mysql 创建用户，数据库

    http://www.jb51.net/article/31850.htm https://www.cnblogs.com/SQL888/p/5748824.html http://www.cnblo ...