首页 > 语言 > JavaScript > 正文

兼容多浏览器的字幕特效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;
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选