分享一款基于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 datetimepicker 配置参数

    jquery的datetimepicker时间控件除了样式有点不太美观,功能性还是相当强大的. 在正常情况下input的type应该设置为"text",可点击又可输入(mask,e ...

  2. 【MySQL】mysql在Windows下使用mysqldump命令备份数据库

    在cmd窗口中使用mysqldump命令首先需要配置环境变量 1,在计算机中找到MySQL的安装位置,找到MySQL Workbench,比如我的是C:\Program Files\MySQL\MyS ...

  3. CentOS7安装Tomcat

    一.二进制包安装Tomcat 1.下载解压二进制包 wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8/v8.5.32/bi ...

  4. 查看Linux内核及发行商版本命令

    一.查看Linux内核版本命令(两种方法): 1. cat /proc/version Linux version -.el7.x86_64 (builder@kbuilder.dev.centos. ...

  5. JPA学习笔记（8）——映射一对多关联关系

    一对多关联关系 本文有很多和多对一是一样的,因此不会写得非常具体. 有看不懂的.能够參考JPA学习笔记(7)--映射多对一关联关系 Order实体类 package com.jpa.helloworl ...

  6. 使用curator 来管理elasticsearch的index

    这里我们参考官网安装curator https://www.cookiesinn.org/elasticsearch_curator_delete_indices/ https://www.elast ...

  7. rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted

    今天在同步数据的时候提示rsync: failed to set times on “xxxx”: Operation not permitted,一般来说要不是服务器时间不对或者权限没有设置好,下面 ...

  8. category使用 objc_setAssociatedObject/objc_getAssociatedObject 实现添加属性

    属性 其实就是get/set 方法.我们可以使用  objc_setAssociatedObject/objc_getAssociatedObject  实现 动态向类中添加 方法 @interfac ...

  9. 菜鸟学SSH（八）——Hibernate对象的三种状态

    前面写了几篇关于SSH的博客,但不是Struts就是Spring,Hibernate还从来没写过呢.说好是SSH的,怎么可以光写那两个,而不写Hibernate呢对吧.今天就先说说Hibernate对 ...

  10. Backpropagation In Convolutional Neural Networks

    http://www.jefkine.com/general/2016/09/05/backpropagation-in-convolutional-neural-networks/ http://w ...