|
|
參數說明:
demo 字幕區域標簽(div)的ID;
demo1/demo2 顯示內容標簽(div或td)的ID demo1為原始內容,demo2是它的拷貝;
direction 字幕方向(up,down,left,right) ;
delay 字幕播放的延遲時間(毫秒);
step 字幕播放的步長(即pix,步長越小,如step=1,滾動越平滑)
function Marquee (demo, demo1, demo2, direction, delay, step)
{
direction = direction.toLowerCase();
if(((direction == "up" || direction == "down") && ($(demo1).offsetHeight > $(demo).offsetHeight)) || ((direction == "left" || direction == "right") && ($(demo1).offsetWidth > $(demo).offsetWidth)))
{
$(demo2).innerHTML = $(demo1).innerHTML;
if(direction == "down")
$(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight;
if(direction == "right")
$(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth;
}
else
return;
var flag = true;
var speed = delay == null? 1 : parseInt(delay);
var amount = step == null? 1 : parseInt(step);
var Marquee = function ()
{
switch(direction)
{
case "up":
if($(demo2).offsetTop - $(demo).scrollTop <= 0)
$(demo).scrollTop -= $(demo1).offsetHeight;
else
$(demo).scrollTop += amount;
break;
case "down":
if($(demo1).offsetTop - $(demo).scrollTop >= 0)
$(demo).scrollTop += $(demo2).offsetHeight;
else
$(demo).scrollTop -= amount;
break;
case "left":
if($(demo2).offsetWidth - $(demo).scrollLeft <= 0)
$(demo).scrollLeft -= $(demo1).offsetWidth;
else
$(demo).scrollLeft += amount;
break;
case "right":
if($(demo).scrollLeft <= 0)
$(demo).scrollLeft += $(demo2).offsetWidth;
else
$(demo).scrollLeft -= amount;
break;
default:break;
}
}
var timer = setInterval(Marquee,speed);
var play = function ()
{
if(flag)
{
clearInterval(timer);
timer = setInterval(Marquee, speed);
}
}
$(demo).onmouseover = function ()
{
if(flag)
clearInterval(timer);
}
$(demo).onmouseout = function ()
{
if(flag)
timer = setInterval(Marquee, speed);
}
this.delay = function (s)
{
speed = s == null? 50 : parseInt(s);
play();
}
this.step = function (s)
{
amount = s == null? 1 : parseInt(s);
play();
}
this.start = function ()
{
if(!flag)
{
flag = true;
play();
}
}
this.stop = function ()
{
if(flag)
{
flag = false;
clearInterval(timer);
}
}
this.direction = function (s)
{
s = s.toLowerCase();
if( s == direction )
return;
if(s == "down" && direction == "up" )
direction = s;
if(s == "up" && direction == "down")
direction = s;
if(s == "right" && direction == "left")
direction = s;
if(s == "left" && direction == "right")
direction = s;
if (s == direction)
play();
}
}
上面js里用到的$或$F,如果你用過prototype.js的話,把它添加進去就行了; 否則你需要先引用下面的js文件: Ruby.js (從prototype.js里截過來的 呵呵)
function Ruby ()
{
}
if (!Array.prototype.push) {
Array.prototype.push = function() {
var startLength = this.length;
for (var i = 0; i < arguments.length; i++)
this[startLength + i] = arguments[i];
return this.length;
}
}
$ = function ()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == ''string'')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
$F = function ()
{
if(arguments.length == 1)
return document.getElementById(arguments[0]).value;
else
{
var elements = new Array();
for(var i = 0;i< arguments.length; i++)
{
elements.push(document.getElementById(arguments[i]).value);
}
return elements;
}
}
到這里,js文件已經搞定了,開始寫HTML代碼:
(1)先添加css樣式,如果你不想滾動字幕里的內容被無故撐大的話(有時候)
<style>
.wrap{word-break:break-all;overflow:hidden}
</style>
(2)添加js文件 -->用了prototype.js的更好,替換掉Ruby.js :)
<script src="Ruby.js"></script>
<script src="Marquee.js"></script>
(3)添加字幕區域內容
1. 向上或向下滾動
<div id="d1" style="overflow:hidden;height:200px;width:90px">
<div id="d11" width="100%" class="wrap">
=頂部=<br>動感地帶資費攻略1 動感地帶資費攻略2<br>=底部=
</div>
<div id="d12" width="100%" class="wrap"></div>
</div>
<script>var obj1 = new Marquee("d1","d11","d12","up");</script>
由于字幕d1的height=200,而d11的內容高度不足200,故字幕默認不會滾動,要實現滾動的話,只需d11的height>200就行了,故只需在d11的里面再放個空div就行了,讓它的height=200; 如果d11的內容高度大于了200px,則字幕區域d1將無間斷滾動
2. 向左或向右滾動
<div id="d2" style="overflow:hidden;width:500">
<table>
<tr>
<td id="d21">
<nobr>
[開始]動感地帶資費攻略1 動感地帶資費攻略2 動感地帶資費攻略3 動感地帶資費攻略4 動感地帶資費攻略5 動感地帶資費攻略6 動感地帶資費攻略7 動感地帶資費攻略8 動感地帶資費攻略9 動感地帶資費攻略10 動感地帶資費攻略11 動感地帶資費攻略12 動感地帶資費攻略13 動感地帶資費攻略14 動感地帶資費攻略15 動感地帶資費攻略16 動感地帶資費攻略17 動感地帶資費攻略18 動感地帶資費攻略19 動感地帶資費攻略20[結束]
</nobr>
</td>
<td id="d22"></td>
</tr>
</table>
</div>
<script>var obj2 = new Marquee("d2","d21","d22","left");</script>
實現原理同上,至于為什么這里要用table而不用div,是因為div在默認情況只能判斷height,而不能判斷width,而table卻恰恰相反,上面用到的nobr標簽也是必需的,防止字幕自動換行!
附: 更改延遲播放速度 obj2.delay(50); 或 obj2.delay("50");
更改播放步長 obj2.step(50); 或 obj2.step("50");
停止播放 obj2.stop(); 繼續播放 obj2.start();
更改播放方向(同類型方向) obj2.direction("right");
JavaScript技術：兼容多瀏覽器的字幕特效Marquee的通用js類，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
