编程 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 相关文章推荐

javascript打开新窗口同时关闭旧窗口

Jan 16 Javascript

用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

Dec 27 Javascript

jQuery jcrop插件截图使用方法

Nov 20 Javascript

javascript简单实现滑动菜单效果的方法

Jul 27 Javascript

不想让浏览器运行javascript脚本的方法

Nov 20 Javascript

Javascript编程之继承实例汇总

Nov 28 Javascript

基于javascript实现样式清新图片轮播特效

Mar 30 Javascript

jQuery实现对象转为url参数的方法

Jan 11 Javascript

微信小程序中吸底按钮适配iPhone X方案

Nov 29 Javascript

vue中实现动态生成二维码的方法

Feb 21 Javascript

深入了解JS之作用域和闭包

Jun 16 Javascript

手机浏览器唤起微信分享(JS)

Oct 11 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