首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现滚动新闻特效代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
如何用js控制css中的float的代码
Aug 16 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
Vue使用CDN引用项目组件，减少项目体积的步骤
Oct 30 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
频率(1) 鉴频器(1) 灵敏度(1) 高放电路(1) 数调机(1) TOSHIBA(1) RP-F11(1) 手调机(1) 频偏(1) 实习报告(1)
You might like
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
dropdownlist之间的互相联动实现（显示与隐藏）
2009/11/24 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
JavaScript编写九九乘法表（两种任选）
2017/02/04 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
bootstrap-table实现服务器分页的示例 （spring 后台）
2017/09/01 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
瑞士香水购物网站：Parfumcity.ch
2017/01/14 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
个人债务授权委托书
2014/10/17 职场文书
2015年重阳节慰问信
2015/03/23 职场文书