ホームページ >ウェブフロントエンド >jsチュートリアル >複数のブラウザと互換性のある字幕効果用の Marquee のユニバーサル JS クラス_リンク効果
Marquee.js
パラメータの説明:
demo 字幕領域タグの ID (div);
demo1/demo2 表示コンテンツ タグの ID (div または td) demo1 はオリジナルのコンテンツです、demo2 は、そのコピーの
方向の字幕の方向 (上、下、左、右)、
の字幕再生の遅延時間 (ミリ秒)、
の小さい方のステップ サイズです。ステップ サイズ (step=1 など)、スクロールがスムーズになります)
関数 Marquee (デモ、デモ 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
var フラグ = true;
var 速度 = 遅延 == null? 1 : parseInt(遅延);
var amount == null 1 :
var Marquee = function ()
{
switch(direction)
{
case "up":
if($(demo2).offsetTop - $(demo).scrollTop $(demo) .scrollTop -= $(demo1).offsetHeight;
else
$(demo).scrollTop = 金額 '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;
case "right": if($(demo).scrollLeft $(demo) .scrollLeft = $(demo2).offsetWidth;
else
$(demo).scrollLeft -= 金額
デフォルト:break;
}
var timer = setInterval(Marquee,speed);
var play = function ()
{
if(flag)
{
clearInterval(タイマー);
timer = setInterval(マーキー, 速度);
}
}
$(demo).onmouseover = function ()
{
if( flag)
clearInterval( timer);
}
$(demo).onmouseout = function ()
{
if(flag)
timer = setInterval(Marquee,速度);
this.lay = function (s)
{
速度 = s == null? : parseInt(s); 🎜> }
this.step = function (s)
{
amount = s == null 1 : parseInt(s);
}
これ。start = function ()
{
if(!flag)
{
flag = true;
}
}
this .stop = function ()
{
if(flag)
{
flag = false;
clearInterval(timer); }
this.direction = function (s)
{
s = s.toLowerCase();
if( s == 方向 )
return; == "下" && 方向 == "上" )
方向 = s;
if(s == "上" && 方向 == "下")
方向 =
if (s == "右" && 方向 == "左")
方向 = s;
if(s == "左" && 方向 == "右")
方向 = if (s == direct)
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 this[startLength i] = 引数[i]
return this.length> } }
$ = function ()
{
var 要素 = new Array();
for (var i = 0; i var 要素 = argument[i]; typeof element == ''string'')
element = document.getElementById(element);
if (arguments.length == 1)
要素を返します。 .push(要素);
}
要素を返します。
$F = function ()
{
if(arguments .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 ファイルを追加します--> 使用したprototype.jsの方が良いです。Ruby.jsを置き換えてください:)
(3) 字幕エリアのコンテンツを追加します
1.
=上=
M ゾーン料金ガイド 1 M ゾーン料金ガイド 2
=下 =
[开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束] |