여러 browsers_link 효과와 호환되는 자막 효과를 위한 Marquee의 범용 js 클래스

Marquee.js

매개변수 설명:
demo 자막 영역 태그의 ID(div)
demo1/demo2 표시 콘텐츠 태그의 ID(div 또는 td) 데모1은 원본 콘텐츠입니다. , 데모2는 복사입니다.
방향 자막 방향(위, 아래, 왼쪽, 오른쪽)
자막 재생 지연 시간(밀리초)
자막 재생 단계 크기(예: pix) step=1과 같은 단계 크기, 스크롤이 더 부드러워짐)



기능 Marquee(demo, 데모1, 데모2, 방향, 지연, 단계)
{
방향 = 방향.toLowerCase();

if(((방향 == "위" || 방향 == "아래") && ($(demo1).offsetHeight > $(demo).offsetHeight)) | | ((방향 == " 왼쪽" || 방향 == "오른쪽") && ($(demo1).offsetWidth > $(demo).offsetWidth)))
{
$(demo2).innerHTML = $(demo1).innerHTML;
if(direction == "down")
$(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight; 방향 == "오른쪽")
$(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth
}
else
return; 🎜> var 플래그 = true;
var 속도 = 지연 == null?
var amount == null? 1 :parseInt(step); Marquee = function ()
{
스위치(방향)
{
case "up":
if($(demo2).offsetTop - $(demo).scrollTop $(demo) .scrollTop -= $(demo1).offsetHeight;
else
$(demo).scrollTop = amount;
break
case "down": if($(demo1).offsetTop - $(demo).scrollTop >= 0)
$(demo).scrollTop = $(demo2).offsetHeight
else
$(demo).scrollTop - = 금액
중단 ;
케이스 "왼쪽":
if($(demo2).offsetWidth - $(demo).scrollLeft $(demo).scrollLeft -= $ (demo1).offsetWidth;
else
$(demo).scrollLeft = amount;
break
case "right": if($(demo).scrollLeft $(demo) .scrollLeft = $(demo2).offsetWidth;
else
$(demo).scrollLeft -= amount;
break;
} }

var 타이머 = setInterval(Marquee,speed);

var play = function ()
{
if(flag)
{
clearInterval(timer);
타이머 = setInterval(Marquee, 속도);
}
}

$(demo).onmouseover = function ()
{
if( 플래그)
ClearInterval( 타이머)
}

$(demo).onmouseout = function ()
{
if(flag)
타이머 = setInterval(Marquee, speed);

this.delay = 함수
{
speed = s == null?
play(); 🎜> }

this.step = 함수
{
amount = s == null? 1 :parseInt(s)
play(); 🎜>
this.start = function ()
{
if(!flag)
{
flag = true
}
}

this .stop = function ()
{
if(flag)
{
flag = false
clearInterval(timer)
}
}

this.direction = 함수
{
s = s.toLowerCase()
if( s == 방향 )
return
if(s) == "아래" && 방향 == "위" )
방향 = s
if(s == "위" && 방향 == "아래")
방향 = s; (s == "오른쪽" && 방향 == "왼쪽")
방향 = s
if(s == "왼쪽" && 방향 == "오른쪽")
방향 = s; > if (s == 방향)
play();
}
}

위 js에서 사용한 $ 또는 $F, 프로토타입.js를 사용한 경우에는 Just 추가하세요. 그렇지 않으면 먼저 다음 js 파일을 참조해야 합니다. Ruby.js(prototype.js에서 잘라낸 것입니다. 하하)



function Ruby ()
{
}

if (!Array.prototype.push) {
Array.prototype.push = function() {
var startLength = this.length;
for (var i = 0; i this[startLength i] = 인수[i];
return this.length }
}

$ = 함수 ()
{
var elements = new Array();

for (var i = 0; i var element = 인수[i]
if ( typeof 요소 == ''string'') 요소 = document.getElementById(element);

if (arguments.length == 1)
return 요소

요소 .push(요소);
}

요소 반환;
}

$F = 함수()
{
if(인수 .length == 1 )
return document.getElementById(arguments[0]).value;
else
{
var elements = new Array()
for(var i = 0 ;i {
elements.push(document.getElementById(arguments[i]).value) }
요소 반환; 🎜> 이제 js 파일이 완성되었으니 HTML 코드 작성을 시작하겠습니다.

(1) 스크롤되는 자막의 내용이 확장되는 것을 원하지 않으면 먼저 CSS 스타일을 추가하세요. 아무 이유 없이(예 시간)


(2) js 파일 추가 --> 프로토타입.js를 사용하는 것이 좋습니다. Ruby.js를 교체하세요 :)




(3) 자막 영역 내용 추가
1.

=Top=
M존 요금안내 1 M존 요금안내 2

=하단=

  <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. 向左或向右滚动

  
   
    
    
   
  

[开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]

 

 <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");