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 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery操作cookie的示例代码
Jun 05 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
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
Phpbean路由转发的php代码
2008/01/10 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
求职简历中自我评价
2014/01/28 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS