编程 Javascript

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

Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现滚动新闻特效。分享给大家供大家参考。具体如下：
jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式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 相关文章推荐

JS宝典学习笔记(下)

Jan 10 Javascript

List Installed Software Features

Jun 11 Javascript

JQuery 拾色器插件发布-jquery.icolor.js

Oct 20 Javascript

根据配置文件加载js依赖模块

Dec 29 Javascript

JS弹出可拖拽可关闭的div层完整实例

Feb 13 Javascript

Node.js制作简单聊天室

Jan 12 Javascript

BootStrap 表单控件之单选按钮水平排列

May 23 Javascript

详解angular中的作用域及继承

May 31 Javascript

浅谈webpack-dev-server的配置和使用

May 17 Javascript

浅析JS中什么是自定义react数据验证组件

Oct 19 Javascript

微信小程序数据缓存实现方法详解

Aug 26 Javascript

JavaScript实现点击出现子菜单效果

Feb 08 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

smarty 缓存控制前的页面静态化原理

2013/03/15 PHP

用php制作简单分页(从数据库读取记录)的方法详解

2013/05/04 PHP

ECshop 迁移到 PHP7版本时遇到的兼容性问题

2016/02/15 PHP

PHP单例模式数据库连接类与页面静态化实现方法

2019/03/20 PHP

JavaScript高级程序设计阅读笔记（二十一） JavaScript中的XML

2012/09/14 Javascript

jQuery获取注册信息并提示实现代码

2013/04/21 Javascript

限制textbox或textarea输入字符长度的JS代码

2013/10/16 Javascript

jquery实现网页查找功能示例分享

2014/02/12 Javascript

JavaScript动态创建link标签到head里的方法

2014/12/22 Javascript

javascript与Python快速排序实例对比

2015/08/10 Javascript

基于jQuery仿淘宝产品图片放大镜特效

2020/10/19 Javascript

AngularJS directive返回对象属性详解

2016/03/28 Javascript

jQuery通过deferred对象管理ajax异步

2016/05/20 Javascript

jQuery 自定义下拉框(DropDown)附源码下载

2016/07/22 Javascript

js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法

2016/08/25 Javascript

使用JavaScript获取URL中的参数(两种方法)

2016/11/16 Javascript

js实现自定义路由

2017/02/04 Javascript

vue 如何添加全局函数或全局变量以及单页面的title设置总结

2017/06/01 Javascript

详解Vue 中 extend 、component 、mixins 、extends 的区别

2017/12/20 Javascript

webpack之引入图片的实现及问题

2018/10/08 Javascript

如何解决.vue文件url引用文件的问题

2019/01/18 Javascript

JavaScript禁用右键单击优缺点分析

2019/01/20 Javascript

基于Webpack4和React hooks搭建项目的方法

2019/02/05 Javascript

微信小程序前端自定义分享的实现方法

2019/06/13 Javascript

python3实现TCP协议的简单服务器和客户端案例(分享)

2017/06/14 Python

对python中的six.moves模块的下载函数urlretrieve详解

2018/12/19 Python

python判断正负数方式

2020/06/03 Python

python中pandas库中DataFrame对行和列的操作使用方法示例

2020/06/14 Python

NFL Game Pass欧洲：在线观看NFL比赛直播和点播，以高清质量播放

2018/08/30 全球购物

医学生毕业自我鉴定

2014/03/26 职场文书

2014年电厂工作总结

2014/12/04 职场文书

质量保证书格式

2015/02/27 职场文书

2016年“我们的节日·中秋节”活动总结

2016/04/05 职场文书

python flask框架快速入门

2021/05/14 Python

中国古风插画师排行榜：夏达第一，第三是阴阳师姑获鸟皮肤创作者

2022/03/18 国漫

pandas中pd.groupby()的用法详解

2022/06/16 Python