基于jQuery实现滚动新闻代码下载
分享一款基于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实现滚动新闻代码下载的更多相关文章
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一款基于jQuery的热点新闻Tab选项卡插件
今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分 ...
- 【js与jquery】jquery循环滚动新闻
2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...
- jQuery循环滚动新闻列表
最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT ...
- 基于jQuery仿去哪儿城市选择代码
基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="lin ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
随机推荐
- SqlLocalDB2014使用笔记
标签: 软件开发,数据库肯定是必不可少的当然是数据库了,在.Net开发中兼容性最好的莫过于微软的亲儿子“SqlServer”了,但是在安装SqlServer的安装随便找个版本就是一个多G或者几百兆,安 ...
- Hadoop学习：Map/Reduce初探与小Demo实现
原文地址:https://blog.csdn.net/liyong199012/article/details/25423221 一. 概念知识介绍 Hadoop MapReduce是一个用于处 ...
- [aaronyang原创] Mssql 一张表3列的sql面试题，看你sql学的怎么样
文章已经迁移到:http://www.ayjs.net/post/99.html 文章已经迁移到:http://www.ayjs.net/post/99.html 文章已经迁移到:http://www ...
- Android RoboGuice开源框架、Butter Knife开源框架浅析
Google Guice on Android(RoboGuice) 今天介绍一下Google的这个开源框架RoboGuice, 它的作用跟之前讲过的Dagger框架差点儿是一样的,仅仅是Dagger ...
- Android RGB颜色查询对照表
因为兼容性问题,色阶板功能只能在IE浏览器中运行 RGB颜色对照表 #FFFFFF #FFFFF0 #FFFFE0 #FFFF00 #FFFAFA #FFFAF0 #FFF ...
- Android基本功:异步任务（AsyncTask）
一.解决新线程无法更新UI组建问题的方案 为了解决新线程不能更新UI组建的问题,Andorid提供了如下几种解决方案: 使用Handler实现线程之间的通信. Activity.runOnUiThre ...
- CentOS7.2安装pure-ftpd 及其配置项
CentOS7.2安装FTP(pure-ftpd-1.0.43) 原文链接: https://www.linuxidc.com/Linux/2016-10/135971.htm [日期:2016-10 ...
- Spring+Mybatis整合过程中找不到.properties文件
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource' ...
- jmeter经验----java 读取文件中文乱码问题
很少写java io的代码,今天整了一个发现 本地调试好好的,放到jmeter里就打印乱码.一番折腾,终于搞定~直接上代码: List<Order> orderList = new Arr ...
- JQuery中serialize()、serializeArray()和param()用法举例
在javascript中,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,serializeArray()方法不是返回字符串,而是将DOM元素序列化后, ...