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

jQuery实现新闻播报滚动及淡入淡出效果示例

Posted in jQuery onMarch 23, 2018

本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果。分享给大家供大家参考，具体如下：

下面是上下滚动源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com 向上滚动代码带上下翻按钮滚动特效</title>
<style type="text/css">
body{ color:#333; font-size:13px;}
h3,ul,li{margin:0;padding:0; list-style:none;}
.scrollbox{ width: 340px; margin: 0 auto; overflow: hidden; border: 1px solid #CFCFCF; padding: 10px; }
#scrollDiv{width:340px;height:359px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/
#scrollDiv li{max-height:90px; width:300px; padding:0 20px;background:url(ico-4.gif) no-repeat 10px 23px; overflow:hidden; vertical-align:bottom; zoom:1; border-bottom:#B7B7B7 dashed 1px;}
#scrollDiv li h3{ height:24px; padding-top:13px; font-size:14px; color:#353535; line-height:24px; width:300px;}
#scrollDiv li h3 a{color:#353535; text-decoration:none}#scrollDiv li h3 a:hover{ color:#F00}
#scrollDiv li div{ height:36px; width:300px; color:#416A7F; line-height:18px; overflow:hidden}
#scrollDiv li div a{ color:#416A7F; text-decoration:none}
.scroltit{ height:26px; line-height:26px; padding-bottom:4px; margin-bottom:4px;}
.scroltit h3{ width:100px; float:left;}
.scroltit .updown{float:right; width:32px; height:22px; margin-left:4px}
#but_up{ background:url(up.gif) no-repeat 0 0; text-indent:-9999px}
#but_down{ background:url(down.gif) no-repeat 0 0; text-indent:-9999px}
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
.test{
  margin-top: 50px;
  background: #CCCCCC;
  border: .5px solid #ddd;
  overflow: hidden;
  height: 44px;
  width: 100px;
}
.test li{
  height: 44px;
  width: 100%;
  float: left;
  line-height: 44px;
  font-size: 18px;
  border-top: .5px solid #ddd;
}
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jq_scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#scrollDiv").Scroll({line:1,speed:500,timer:2000,up:"but_up",down:"but_down"});
  (function(){
    var lineH = $(".test").find("li:first").height();
    var appendTo = function(){
      $(".test").find("li:first").appendTo($(".test"));
      $(".test ul").css("marginTop", 0);
    };
    var animate = function(){
      $(".test ul").eq(0).animate({
        marginTop: -lineH
      },500,appendTo)
    };
    var delayer = setInterval(animate, 2000);
  })()
});
</script>
</head>
<body>
<p align="center"><strong>特效效果如下：</strong></p>
<p> </p>
<div class="scrollbox">
  <div id="scrollDiv">
    <ul>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">移动娱乐业务突飞</a></h3></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">不停转动向上滚动可控制向上向下滚动特效</a></h3> <div>DIV CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </div></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">全国涂料总产量呈现直线下滑态势</a></h3> <div>我国涂料工业将面临涂料消费税征收全面铺开，环保压力持续增加，2015年的形势不容乐观... </div></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">镂空渔网超吸睛</a></h3> <div>镂空罩衫，短短的版型穿起来显高又俏皮，内搭长款连衣裙，非常大方哦... </div></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">主题创业街亮相</a></h3> <div>目前已有包括咖啡厅、酒吧、餐厅、瑜伽室在内的8家商铺入驻该火车... </div></li>
    </ul>
  </div>
  <div class="scroltit"><div class="updown" id="but_down">向上</div><div class="updown" id="but_up">向下</div></div>
</div>
<div class="test">
  <ul>
    <li>sections1</li>
    <li>sections2</li>
    <li>sections3</li>
    <li>sections4</li>
  </ul>
</div>
</body>
</html>

下面是jq插件源码

/*
jQ向上滚动带上下翻页按钮
*/
(function($){
$.fn.extend({
    Scroll:function(opt,callback){
        //参数初始化
        if(!opt) var opt={};
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
        var timerID;
        var _this=this.eq(0).find("ul:first");
        var   lineH=_this.find("li:first").height(), //获取行高,此处行高固定但是当文字伟一行或者两行时，要动态获取吧？？
            line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
            speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
            timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
        if(line==0) line=1;
        var upHeight=0-line*lineH;
        //滚动函数
        var scrollUp=function(){
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
            _this.animate({
              //当滚动的元素height为max-height时，实时获取元素height
                marginTop:-_this.find("li:first").height()
            },speed,function(){
                // for(i=1;i<=line;i++){
                //     _this.find("li:first").appendTo(_this);
                // }
                _this.find("li:first").appendTo(_this);
                _this.css({marginTop:0});
                _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
            });
        }
        //Shawphy:向下翻页函数
        var scrollDown=function(){
            _btnDown.unbind("click",scrollDown);
            for(i=1;i<=line;i++){
                _this.find("li:last").show().prependTo(_this);
            }
            _this.css({marginTop:-_this.find("li:first").height()});
            _this.animate({
                marginTop:0
            },speed,function(){
                _btnDown.bind("click",scrollDown);
            });
        }
        //Shawphy:自动播放
        var autoPlay = function(){
            if(timer)timerID = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
            if(timer)window.clearInterval(timerID);
        };
         //鼠标事件绑定
        _this.hover(autoStop,autoPlay).mouseout();
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    }
})
})(jQuery);

另外再贴一份，删改之后的脚本

/*
jQ向上滚动带上下翻页按钮
*/
(function($){
$.fn.extend({
    txtScroll:function(opt,callback){
        //参数初始化
        if(!opt) var opt={};
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
        var timerID;
        var _this=this.eq(0).find("ul:first");
            speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
            timer=opt.timer?parseInt(opt.timer,10):2000; //滚动的时间间隔（毫秒）
        //滚动函数
        var scrollUp=function(){
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
            _this.animate({
                //当滚动的元素height为max-height时，实时获取元素height
                marginTop: -_this.find("li:first").height()
            },speed,function(){
                _this.find("li:first").appendTo(_this);
                _this.css({"marginTop":0});
                _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
            });
        }
        //Shawphy:向下翻页函数
        var scrollDown=function(){
            _btnDown.unbind("click",scrollDown);
            _this.find("li:last").show().prependTo(_this);
            _this.css({marginTop:-_this.find("li:first").height()});
            _this.animate({
                marginTop:0
            },speed,function(){
                _btnDown.bind("click",scrollDown);
            });
        }
        //Shawphy:自动播放
        var autoPlay = function(){
            if(timer) setIntervalT = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
            if(timer)window.clearInterval(setIntervalT);
        };
         //鼠标事件绑定
        _this.hover(autoStop,autoPlay).mouseout();
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    }
})
})(jQuery);

运行效果如下：

jQuery实现新闻播报滚动及淡入淡出效果示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现新闻播报滚动及淡入淡出效果示例

- Author -

freshing123

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

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
电台(1) 索尼(5) 天线(6) 发报机(1) 电路图(1) 短波(1) 电磁辐射(1) LW(1) SW(1) PL-880(1)
You might like
php删除数组元素示例分享
2014/02/17 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
2015/03/03 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python动态网页批量爬取
2016/02/14 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
德国最新街头服饰网上商店：BODYCHECK
2019/09/15 全球购物
Hammitt官网：设计师手袋
2020/05/23 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
机电一体化专业应届本科生求职信
2013/09/27 职场文书
送货司机岗位职责
2013/12/11 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis