基于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 ...
随机推荐
- 【Visual Studio】Visual C# 中XML注释的使用（含注释在开发时显示换行）
为函数方法注释说明要用到 xml 语句 <summary> 段落说明 </summary> .<para> 新段示例说明 </para>.<par ...
- 【struts2】自定义更强大的logger拦截器
Struts2自带的logger拦截器只是打印出了Action所对应的URL以及执行的方法名称,这对实际开发来说是肯定不够的.实际开发中为了调试方便,要记录的信息比较多,通常需要把这次请求相关的几乎所 ...
- 【struts2】预定义拦截器
1)预定义拦截器 Struts2有默认的拦截器配置,也就是说,虽然我们没有主动去配置任何关于拦截器的东西,但是Struts2会使用默认引用的拦截器.由于Struts2的默认拦截器声明和引用都在这个St ...
- Eclipse SQLExplorer插件的安装和使用
from: http://blog.csdn.net/flashlm/archive/2007/06/30/1672836.aspx 插件名称: SQLExplorer 插件分类: SQL Edito ...
- C++中的#和##运算符
#和##运算符 #:构串操作符 构串操作符#只能修饰带参数的宏的形参,它将实参的字符序列(而不是实参代表的值)转换成字符串常量 #define STRING(x) #x#x#x #define TEX ...
- java中使用for遍历集合是注意的空指针异常
public static void main(String[] args) { List<Object> a = null; for(Object i : a)//会有空指针异常 { } ...
- xpath的常见操作
1. 获取某一个节点下所有的文本数据: data = response.xpath('//div[@id="zoomcon"]') content = ''.join(data.x ...
- vue全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.相比于Angular.js,Vue.js提供了更加简 ...
- Vue知识点超快速学习
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- java 分布式锁总结
第一步,自身的业务场景: 在我日常做的项目中,目前涉及了以下这些业务场景: 场景一: 比如分配任务场景.在这个场景中,由于是公司的业务后台系统,主要是用于审核人员的审核工作,并发量并不是很高,而且任务 ...