コンテンツや画像を縦にスライドさせるJavaScript（MooTools）

トップページなどで狭いスペース内にコンテンツや画像を表示させる場合にjqueryのタブやスライダーを使用する事がありますが、このMooToolsのスクリプトも良いかもしれませんね。

参考サイト）
Fantastic News Ticker Newsvine-like using Mootools
DEMO

参考サイトのDEMOではコンテンツのタイトルと抜粋記事を縦にスクロールさせて表示しています。以下のDEMOは少しアレンジして画像で表示してみました。いろんな使い道がありそうですね。

バナー（468px × 60px）を縦にスライドさせたDEMO

スクリプト「mootools.svn.js」を以下サイトよりダウンロード。
ダウンロード：http://woorktuts.110mb.com/newsticker/mootools/mootools.svn.js

そして以下のJavaScriptをHTML内に記述、または外部ファイルで読み込みます。

デモは外部ファイル「bannerticker.js」にして読み込んでいます。
スクロールのスピード調整は”speed: 1500”

「bannerticker.js」

var Ticker = new Class({
	setOptions: function(options) {
		this.options = Object.extend({
			speed: 1500,
			delay: 5000,
			direction: 'vertical',
			onComplete: Class.empty,
			onStart: Class.empty
		}, options || {});
	},
	initialize: function(el,options){
		this.setOptions(options);
		this.el = $(el);
		this.items = this.el.getElements('li');
		var w = 0;
		var h = 0;
		if(this.options.direction.toLowerCase()=='horizontal') {
			h = this.el.getSize().size.y;
				this.items.each(function(li,index) {
				w += li.getSize().size.x;
			});
	} else {
			w = this.el.getSize().size.x;
			this.items.each(function(li,index) {
				h += li.getSize().size.y;
			});
		}
		this.el.setStyles({
			position: 'absolute',
			top: 0,
			left: 0,
			width: w,
				height: h
		});
		this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
			var i = (this.current==0)?this.items.length:this.current;
			this.items[i-1].injectInside(this.el);
			this.el.setStyles({
				left:0,
				top:0
			});
		}.bind(this)});
		this.current = 0;
		this.next();
		},
	
	pause: function() {
	    $clear(mytimer);
	    mytimer = null;
	},
	resume: function() {
	    if (mytimer == null) {
	    this.next();
	    }
	},
	next: function() {
		this.current++;
		if (this.current >= this.items.length) this.current = 0;
		var pos = this.items[this.current];
		this.fx.start({
			top: -pos.offsetTop,
			left: -pos.offsetLeft
		});
		mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
	}
});

var mytimer = null;

window.addEvent('domready', function() {
   var hor = new Ticker('TickerVertical', {
      speed : 500, delay : 5000, direction : 'vertical'});
    $('stop_scroll').addEvent('click', function() {
		$('play_scroll_cont').style.display='block';
		$('stop_scroll_cont').style.display='none';
		hor.pause();
	});
    $('play_scroll').addEvent('click', function() {
		$('stop_scroll_cont').style.display='block';
		$('play_scroll_cont').style.display='none';
		hor.resume();
	});
});

※デモの場合、head内に以下のように記述

<html>
<head>
<script language="javascript" src="mootools.svn.js" type="text/javascript"></script>
<script language="javascript" src="bannerticker.js" type="text/javascript"></script>
</head>
<html>

HTML（リスト部分がバナー）

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<script language="javascript" src="mootools.svn.js" type="text/javascript"></script>
<script language="javascript" src="bannerticker.js" type="text/javascript"></script>
<style type="text/css">
#scroller {
	width: 480px;
	font-size: 11px;
	color: #fff;
	background: #eaebf8;
}

.scroller-title {
	height: 15px;
	padding: 5px;
	background: #666;
	font-weight: bold;
	margin-bottom:5px;
}

.scroller-title span.left  { float: left;}
.scroller-title span.right { float: right;}
.scroller-title span.right img { vertical-align:middle;}

#play_scroll_cont{display:none;}

#Vertical {
	width: 480px;
	height: 220px;
	display: block;
	overflow: hidden;
	position: relative;
}

#TickerVertical {
	width: 480px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #eaebf8;
}

#TickerVertical a:hover img { border: 1px solid #666;}
#TickerVertical img { border: 1px solid #fff;}

/* バナー */
#TickerVertical li {
	margin: 0;
	padding: 5px;
	float: left;
	width: 470px;
	height: 62px;
	display: block;
}
</style>
</head>
<body>
<div id="scroller">
  <div class="scroller-title">
   <span class="left">ドメイン＆レンタルサーバー</span>
   <span class="right">
    <div id="controller">
    <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div>
    <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div>
   </span>
  </div>
</div><!-- /scroller -->

<div id="Vertical">
 <ul id="TickerVertical">
  <li>ここにバナー</li>
  <li>ここにバナー</li>
  <li>ここにバナー</li>
  <li>ここにバナー</li>
 </ul>
</div><!-- /Vertical -->
</body>
</html>

コンテンツや画像を縦にスライドさせるJavaScript（MooTools）

この記事をご覧なった方はこちらもご覧になっています

関連記事

コメントを残す