兼容多瀏覽器的字幕特效Marquee的通用js類
2024-05-06 14:17:35
供稿：網友
Marquee.js
參數說明:
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;
