まめ畑

ゆるゆると書いていきます

うごメモのサムネを一気に動かすグリモン書いた

去年のクリスマスからサービスが開始されたうごめもはてなですが、うごいているメモを見るにはサムネ上にマウスをのっけるか詳細ページに行くしかないのでグリモンとJSの練習に書いてみました。
初JSなのでなにかあったらコメントをお願いします><


ここからインストールしてください。


インストールしたらとりあえず「うごメモはてな」にアクセス。

そうすると



になります。


なんか増えましたね。


ここでおもむろにSTARTをクリックすると・・・。


全部のサムネが動きだします。
人気作品や新着作品一覧で実行すると結構爽快です。
STOPでとまります。


一応、こういうソースになっています
(JavaScript の配列と連想配列の違い - IT戦記を見て修正しました。forとfor inの使い分けが参考になりました。)

// ==UserScript==
// @name           UgomemoStart
// @namespace      http://mame-lab.com/
// @include        http://ugomemo.hatena.ne.jp/*
// ==/UserScript==

(function() {

	var thumbs = getElementsByClassName('thumb');
	var thumbs_num = thumbs.length;
	createMenu('START', start);
	createMenu('STOP', stop);

	function createMenu(text, func){
		var menu = getMenu();
		var color = getElementsByClassName('colorselecter')[0];
		var li = document.createElement('li');
		var a = document.createElement('a');

		a.innerHTML = text;
		a.href = 'javascript:void(0);';
		a.addEventListener('click', func, false);
		li.appendChild(a);
		menu.insertBefore(li, color);
	}

	function getMenu(){
		return getElementsByClassName('menu')[0];
	}

	function start(){
		for(var index = 0; index < thumbs_num; index++) thumbs[index].src = thumbs[index].src.replace(/_m.gif$/, '_as.gif');
	}
	function stop(){
		for(var index = 0; index < thumbs_num; index++) thumbs[index].src = thumbs[index].src.replace(/_as.gif$/, '_m.gif');
	}

	function getElementsByClassName(target){
		var list = [];
		var tags = document.getElementsByTagName('*');
		for(var index = 0; index < tags.length; index++){
			if(tags[index].getAttribute && tags[index].getAttribute('class') == target){
				list.push(tags[index]);
			}
		}
		return list;
	}
})()