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

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>

發表迴響