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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php数组查找函数总结
2014/11/18 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python全排列操作实例分析
2018/07/24 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python扫描线填充算法详解
2020/02/19 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
道德模范先进事迹
2014/02/14 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Redis命令处理过程源码解析
2022/02/12 Redis