jQuery实现自动与手动切换的滚动新闻特效代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现滚动新闻特效。分享给大家供大家参考。具体如下:
jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件。有三种展示新闻的方式,自动向下循环展示,自动向上循环展示以及手动循环展示,总有一款适合你的。
运行效果图:                                -------------------查看效果 下载源码-------------------

jQuery实现自动与手动切换的滚动新闻特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现滚动新闻特效代码如下

<!doctype html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>jQuery实现滚动新闻代码</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css">
 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
 <link href="css/site.css" rel="stylesheet" type="text/css" />
 <!--[if IE]>
 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>
<body>
 <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="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="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="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="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="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="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="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>
 
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <script src="js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(".demo1").bootstrapNews({
  newsPerPage: 5,
  autoplay: true,
 pauseOnHover:true,
  direction: 'up',
  newsTickerInterval: 4000,
  onToDo: function () {
  //console.log(this);
  }
 });
 
 $(".demo2").bootstrapNews({
  newsPerPage: 4,
  autoplay: true,
 pauseOnHover: true,
 navigation: false,
  direction: 'down',
  newsTickerInterval: 2500,
  onToDo: function () {
  //console.log(this);
  }
 });

 $("#demo3").bootstrapNews({
  newsPerPage: 3,
  autoplay: false,
  
  onToDo: function () {
  //console.log(this);
  }
 });
 });
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是为大家分享的jQuery实现滚动新闻特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
简单的js表格操作
Sep 24 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuery设计思想
Mar 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 #Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
canvas知识总结
2017/01/25 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
在python3中实现更新界面
2020/02/21 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python中zip函数如何使用
2020/06/04 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
艺术专业大学生自我评价
2013/09/22 职场文书
公司合作协议书范本
2014/04/18 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
努力学习保证书
2015/02/26 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python