[jQuery]簡單的向上Marquee跑馬燈公告效果

yku javascript, jquery, opensource, 程式

Html本身有一個Tag Marquee可以使用Marquee跑馬燈功能，不過功能十分有限，像是滑鼠移入停止，每一筆內容暫停後再執行下一筆等，原本的Marquee跑馬燈都不支援。

MarqueeExample

這個範例是利用jQuery的animate來移動scroll，達到移動的感覺，所以再初始化時需要先close一份資料append上去，如此在移動到最後一筆時，才不會因為scrollBar到底而無法移動。而Mouse移入時則stop animate及clear移除的Timeout，待Mouse out後，再執行，不過這部份控制的沒有很好，有興趣的人可以再加以修改。

Demo範例

程式範例：

JavaScript

$(function(){
    
    new scrollBar("#scrollbar");

});

var scrollBarControler ;
var scrollBar=function(id)
{
    scrollBarControler = this;
    //最大高度
    this.ulHeight = $(id+" ul").height();
    //每一筆資料的高度
    this.liHeight = new Array();
    this.liHeight[0] = 0 ;
    //移動到哪一筆資料
    this.idx = 0 ;
    this.timer = null;
    //所有的要移動的子結點
    var childs = $(id+" ul")[0].children;
    //一共有幾個字結點
    this.size = childs.length;
    
    var countSize = 0 ;
    //把所有子結點高度都存起來,每次移動時可取用
    //這裡存的是top的位置
    for(var i = 0 ; i < this.size;i++)
    {
        this.liHeight[i+1] = countSize + $(childs[i] ).height();
        countSize = this.liHeight[i+1];
    }
    //複制一份資料至div#scrollBar裡
    $(id+' ul').clone().appendTo($(id));
    //滑鼠移出後重新啟動animate
    this.resum = function(){
        $(id).animate({scrollTop: this.liHeight[this.idx]}, 2000,this.callback);
    }
    //移動效果
    this.scrollTo = function(){
        this.idx ++;
        //如果是最後一筆了,把scrollbar設到0
        if(this.idx>this.size){
            //this.idx = 0 ;
            $(id).scrollTop (0);
            this.idx = 1;
            
        }
    
        $(id).animate({scrollTop: this.liHeight[this.idx]}, 3000,this.callback);
        
    }
    //移動動作完成後的callback,停3移動再執行移動效果
    this.callback=function(time){
        clearTimeout(this.timer);
        this.timer = setTimeout(function() { 
          scrollBarControler.scrollTo(); 
        },time?time:3000);
    }
    this.scrollTo();
    //mouse移入後停企效果
    $(id).bind("mouseover",{myobj:this,id:id},function(e){
        $(e.data.id).stop();
        if(e.data.myobj.timer!=null){
            clearTimeout(e.data.myobj.timer);
        }
    });
    //mouse移出後執行效果
    $(id).bind("mouseout",{myobj:this,id:id},function(e){
        e.data.myobj.resum();
        
    });
    
    
}

CSS

div#scrollbar
{
    overflow:hidden;
    width:200px;
    height:200px;
}
div#scrollbar ul li.list
{
    padding:0px;
    margin:0px;
    width:100%;
}
div#scrollbar ul
{
    position:relative;
    top:0px;
    left:0px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}

Html資料

<div id="scrollbar">
<ul>
<li class="list">
Life爵士樂團 『我們透過旋律傳達一種對生活的態度』、『藝術也可以很貼近生活』 2002年，Life爵士樂團正式成立，憑著一股對爵士樂的熱情，以及自我的肯定，集合了五 位視障者所組成的Life爵士樂團，有著絕佳的演奏默契，每一次演出都展現出一流的演奏 實力，嘗
</li>
<li class="list">
今年水越設計再度超越自己，設計了一款以往你在市面上都沒看過的年曆，2013 年的年曆一套中有五張，每張上頭都標示著 2013 年，卻是讓你可以分別紀錄五種不同層次的年，例如「綠色生活的年」、「放假的年」、「記錄進度的年」、「過節慶祝的年」、「學習的年」，不用再密密麻麻地
</li>
<li class="list">
test~~~~
</li>
</ul>
</div>

全部程式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    
    new scrollBar("#scrollbar");

});

var scrollBarControler ;
var scrollBar=function(id)
{
    scrollBarControler = this;
    //最大高度
    this.ulHeight = $(id+" ul").height();
    //每一筆資料的高度
    this.liHeight = new Array();
    this.liHeight[0] = 0 ;
    //移動到哪一筆資料
    this.idx = 0 ;
    this.timer = null;
    //所有的要移動的子結點
    var childs = $(id+" ul")[0].children;
    //一共有幾個字結點
    this.size = childs.length;
    
    var countSize = 0 ;
    //把所有子結點高度都存起來,每次移動時可取用
    //這裡存的是top的位置
    for(var i = 0 ; i < this.size;i++)
    {
        this.liHeight[i+1] = countSize + $(childs[i] ).height();
        countSize = this.liHeight[i+1];
    }
    //複制一份資料至div#scrollBar裡
    $(id+' ul').clone().appendTo($(id));
    //滑鼠移出後重新啟動animate
    this.resum = function(){
        $(id).animate({scrollTop: this.liHeight[this.idx]}, 2000,this.callback);
    }
    //移動效果
    this.scrollTo = function(){
        this.idx ++;
        //如果是最後一筆了,把scrollbar設到0
        if(this.idx>this.size){
            //this.idx = 0 ;
            $(id).scrollTop (0);
            this.idx = 1;
            
        }
    
        $(id).animate({scrollTop: this.liHeight[this.idx]}, 3000,this.callback);
        
    }
    //移動動作完成後的callback,停3移動再執行移動效果
    this.callback=function(time){
        clearTimeout(this.timer);
        this.timer = setTimeout(function() { 
          scrollBarControler.scrollTo(); 
        },time?time:3000);
    }
    this.scrollTo();
    //mouse移入後停企效果
    $(id).bind("mouseover",{myobj:this,id:id},function(e){
        $(e.data.id).stop();
        if(e.data.myobj.timer!=null){
            clearTimeout(e.data.myobj.timer);
        }
    });
    //mouse移出後執行效果
    $(id).bind("mouseout",{myobj:this,id:id},function(e){
        e.data.myobj.resum();
        
    });
    
    
}
</script>
<style type="text/css">
div#scrollbar
{
    overflow:hidden;
    width:200px;
    height:200px;
}
div#scrollbar ul li.list
{
    padding:0px;
    margin:0px;
    width:100%;
}
div#scrollbar ul
{
    position:relative;
    top:0px;
    left:0px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
</style>
</script>
</head>
<body>
<div id="scrollbar">
<ul>
<li class="list">
Life爵士樂團 『我們透過旋律傳達一種對生活的態度』、『藝術也可以很貼近生活』 2002年，Life爵士樂團正式成立，憑著一股對爵士樂的熱情，以及自我的肯定，集合了五 位視障者所組成的Life爵士樂團，有著絕佳的演奏默契，每一次演出都展現出一流的演奏 實力，嘗
</li>
<li class="list">
今年水越設計再度超越自己，設計了一款以往你在市面上都沒看過的年曆，2013 年的年曆一套中有五張，每張上頭都標示著 2013 年，卻是讓你可以分別紀錄五種不同層次的年，例如「綠色生活的年」、「放假的年」、「記錄進度的年」、「過節慶祝的年」、「學習的年」，不用再密密麻麻地
</li>
<li class="list">
test~~~~
</li>
</ul>
</div>
</body>
</html>

發表迴響