Clever Geek Handbook

JavaScriptを使用した垂直スクロール

多くの場合、テキストが垂直にスクロールする広告ユニットに遭遇します。 そのようなブロックを作成するには、Flash、Silverlight、Javascriptなどのいくつかのテクノロジーを使用できます。 私の問題を解決するために、Javascriptを使用しました。 利点のうち、追加のプラグインをインストールする必要がないことを区別できます。



JQueryはサポートフレームワークとして選択されました。 これは、ブラウザ間の互換性の問題を解決するのに役立ちます。



挑戦する



特定の幅のブロックにテキストメッセージ（リンク、画像）を表示する必要があります。 メッセージは順番に表示される必要があります。 表示サイクルは時間間隔に限定されません。



可能な解決策



ソリューションのオプションとして、次のことを検討しました。



提案されたオプションの長所と短所



最初のオプションを使用すると、次の欠点に気付きました。5回目の反復後、ブロックが「フロート」し始めました。つまり、修正が必要でした。 すでに表示されているデータはブロックに残りますが、ブロックでは不要になります。 その結果、しばらくすると、ブラウザは「減速」し始めます。

オプション2はすでに優れています。 無意味なデータストレージはありませんが、ブロックはまだフローティングです。

オプション番号3は、問題の解決策でした。



実装



JavaScriptコード：

var scrollerstep = 1 ;

var lefttime = 0 ;

var scroll_interval = 5000 ;

var scroll_speed = 50 ;

var part = 1 ;

var step = 50 ;

var delta = 0 ;

var delta_d = 1 ;

var correct = 0 ;

var step_l = 0 ;

var scrol__data = new Array ();

var scroll_text_id = 'scroll_text' ;

var scroll_text_class = 'scroll_data' ;



function scroll_add(str) {

scrol__data[scrol__data.length] = str;

}



function set_Interval(interval){

scroll_interval = interval;

}



function set_Speed(speed){

scroll_speed = speed;

}



function runScroll() {

if (part > scrol__data.length - 1 ) {

$( '#' + scroll_text_id).css( 'top' , '0px' );

$( '#' + scroll_text_id).attr( 'innerHTML' , '' );

$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[scrol__data.length - 1 ] + '</p>' );

part = 0 ;

}

if (part != 0 ) {

$( '#' + scroll_text_id).css( 'top' , '0px' );

$( '#' + scroll_text_id).attr( 'innerHTML' , '' );

$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[part - 1 ] + '</p>' );

}



var c_data = '<p class="' + scroll_text_class + '">' + scrol__data[part] + '</p>' ;

part = part + 1 ;

step_l = 0 ;

$( '#' + scroll_text_id).append(c_data);

lefttime = setInterval( "scrollText()" , scroll_speed);

}



function scrollText() {

currstop = parseInt ( - 1 * (step) - delta);

if ( parseInt (step_l) >= currstop) {

nextval = parseInt ($( '#' + scroll_text_id).css( 'top' )) - scrollerstep + 'px' ;

step_l = step_l - scrollerstep;

$( '#' + scroll_text_id).css( 'top' , nextval);

} else {

window .clearInterval(lefttime);

}

}



function scroll_run(){

$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[ 0 ] + '</p>' );

setInterval( "runScroll()" , scroll_interval);

}









接続と初期化：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >

<title> Vertical scroll </title>

<script type= "text/javascript" src= "jquery.js" ></script>

<script type= "text/javascript" src= "scroll.js" ></script>

<style type= "text/css" >

.scroll_data {

display : block ;

height :50px ;

margin :0px ;

padding :0px ;

vertical-align : middle ;

}

.scroll_block {

position : relative ;

top :50px ;

border :1px solid #DDDDDD ;

width :400px ;

height :50px ;

overflow : hidden ;

}

.scroll_text {

position : absolute ;

right :0px ;

top :0px ;

width :100% ;

}

</style>

</head>

<body>

<script type= "text/javascript" >

$( document ).ready( function () {

set_Interval( 3000 );

set_Speed( 30 );

scroll_add( 'string1' );

scroll_add( 'string2' );

scroll_add( 'string3' );

scroll_add( 'string4' );

scroll_add( 'string5' );

scroll_add( 'string6' );

scroll_run();

});

</script>

<div class= "scroll_block" >

<div id= "scroll_text" class= "scroll_text" >

</div></div>

</body>

</html>









結果



作業の結果はここにあります。

ここからソースコードをダウンロードしてください

このソリューションが役立つことを願っています。


More articles:


All Articles