基于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 ...
随机推荐
- numpy的生成网格矩阵 meshgrid()
numpy模块中的meshgrid函数用来生成网格矩阵,最简单的网格矩阵为二维矩阵 meshgrid函数可以接受 x1, x2,..., xn 等 n 个一维向量,生成 N-D 矩阵. 1 基本语法 ...
- mysql-1045(28000)错误
说明:win7系统,已经装过一个安装版的mysql(服务没有启动),然后又安装了一个免安装版的mysql,然后启动该免安装版的mysql后,用root用户无法登陆(因为想着root用户默认密码是空,但 ...
- 如何在osx的终端下使用字典
因为各种原因我经常要在osx上查英文单词,在osx系统下,查字典其实是一件非常优雅的事情,三指轻触,简单快速.在terminal中其实也是这样,3指轻触需要查询的单词,释义一触即发,用户体验非常好.不 ...
- Eclipse自己定义keystore
首先新建一个自己的***.keystore.(假设没有,新建过程中參考下面设置) 改动keystorepassword的命令(keytool为JDK自带的命令工具,my.keystore为自己的文件名 ...
- shell将脚本输出结果记录到日志文件
使用tee命令: sh portal/main.sh |tee log.txt 获取脚本父类路径cmddir="`dirname $0`"
- [转]FutureTask详解
FutureTask类是Future 的一个实现,并实现了Runnable,所以可通过Excutor(线程池) 来执行,也可传递给Thread对象执行.如果在主线程中需要执行比较耗时的操作时,但又不 ...
- Python 爬虫编码格式问题 gb2312转换utf8
遇到的问题是:爬取网页得到的结果如下(部分) 里面的中文出现乱码. <!DOCTYPE html> <html lang='zh-CN'> <head> < ...
- php实现ZIP压缩文件解压缩(转)
测试使用了两个办法都可以实现: 第一个:需要开启配置php_aip.dll <?php //需开启配置 php_zip.dll //phpinfo(); header("Content ...
- 如何上传代码到github？
如何上传代码到github? 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安 ...
- django -- 对行的更新只有在save调用后才会入库
python3 manage.py shell Python 3.6.2 (v3.6.2:5fd33b5926, Jul 16 2017, 20:11:06) [GCC 4.2.1 (Apple In ...