基于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 ...
随机推荐
- 【Spring】SpringMVC之上传文件
这里笔者介绍利用SpringMVC上传图片的操作. 步骤 1. 引入jar文件 不仅需要导入开发SpringMVC相关的包,还需要导入 commons-fileupload-1.2.1.jar 和 ...
- 【Oracle】Oracle约束的总结
你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...
- 再说Android RecyclerView局部刷新那个坑
RecyclerView局部刷新大家都遇到过,有时候还说会遇见图片闪烁的问题. 优化之前的效果: 优化之后的效果: 如果想单独更新一个item,我们通常会这样做,代码如下: mLRecyclerV ...
- ListView点击Item展开隐藏项（单项展开、多项展开、复杂布局时的展开处理）
手机屏幕毕竟有限,当我们要显示较多数据时便不得不舍去一些次要信息.将主要信息优先显示,也使显示效果更加简洁美观.遇到类似的需求,我们使用最多的就是 ListView ,而假设每次点击一个 Item 都 ...
- Android Camera开发：给摄像头预览界面加个ZoomBar（附完整代码下载）
源码:http://files.cnblogs.com/android100/StandardCamera2013-10-18.zip 废话不说了,就是加个seekbar,拖动的话能够调节焦距,让画面 ...
- 温故而知新 监听 XMLHttpRequest 发起请求
window.XMLHttpRequest.prototype.open 可以监听 XMLHttpRequest .但不能监听fetch请求. <!DOCTYPE html> <ht ...
- MySQL通过Explain查看select语句的执行计划结果触发写操作
[背景] 某某同学执行了一下Explain结果结果发现数据库有了一条写入操作,恭喜这位同学你的锅到货了,你签收一下: 对! 你没有听错,在一种场景下就算是Explain也会引发数据的写操作,就这是外层 ...
- 用Entityframework 调用Mysql时，datetime格式插入不进去数据库的解决办法。
1. 打开Model.edmx, 2. 选择userinfo中的createtime字段的属性 3. storegeneratedpattern设置值为None
- [CTCI] 单词最近距离
单词最近距离 题目描述 有一篇文章内含多个单词,现给定两个单词,请设计一个高效算法,找出文中这两个单词的最短距离(即最少相隔的单词数,也就是两个单词在文章中位置的差的绝对值). 给定一个string数 ...
- eclipse自动切换到debug视图
原文出自:http://blog.csdn.net/yizhizouxiaqu/article/details/7594502 当弹出"Confir Perspective Switch&q ...