もんたメソッドをモジュール化した。
紙を剥がす感じのもんたメソッド - flowerhill’s Unionで書いた物が、酷く中途半端だったので続きを書いた。とりあえずソース。
var Monta = function(id){ this.elem = document.getElementById(id); this.plusCount = 0; }; Monta.SHOW_SPEED = 15; Monta.FADE_SPEED = 50; Monta.BACK_GROUND = [ "#000", "#111", "#222", "#333", "#444", "#555", "#666", "#777", "#888", "#999", "#aaa", "#bbb", "#ccc", "#ddd", "#eee", "#fff" ]; Monta.addEventListener=function(element,name,observer){ if (element.addEventListener) { element.addEventListener(name, observer,true); } else if (element.attachEvent) { element.attachEvent('on' + name, observer); } } Monta.prototype={ initialize : function(id){ this.method_content = this.elem.innerHTML; this.elem.innerHTML = ''; this.create_content(this.method_content); this.spans = this.elem.getElementsByTagName('span'); }, create_content : function(method_content){ for (var i=0; i<method_content.length; i++) { var span = document.createElement('span'); span.className='monta'; span.innerHTML=method_content.charAt(i); this.elem.appendChild(span); } }, monta_show : function (){ if (this.plusCount==this.spans.length)return; if (this.spans[this.plusCount].className == 'monta') { this.spans[this.plusCount].style.backgroundColor='transparent'; } this.plusCount++; var self = this; setTimeout(function(){self.monta_show.apply(self)},Monta.SHOW_SPEED); }, monta_reverse : function(){ this.minusCount--; if (this.minusCount < 0 )return; if (this.spans[this.minusCount].className == 'monta') { this.spans[this.minusCount].style.backgroundColor='transparent'; } var self = this; setTimeout(function(){self.monta_reverse.apply(self)},Monta.SHOW_SPEED); }, monta_fade : function(){ if(this.plusCount==Monta.BACK_GROUND.length)return; this.elem.style.backgroundColor = Monta.BACK_GROUND[this.plusCount]; this.plusCount++; var self = this; setTimeout(function(){self.monta_fade.apply(self)},Monta.FADE_SPEED); }, fade : function(){ this.elem.style.background = '#000'; var self = this; var listner = function(){self.monta_fade.apply(self);} Monta.addEventListener(this.elem,'click',listner,true); }, reverse : function(){ this.initialize(); this.minusCount = this.spans.length; var self = this; var listner = function(){self.monta_reverse.apply(self);} Monta.addEventListener(this.elem,'click',listner,true); }, show : function(){ this.initialize(); var self = this; var listner = function(){self.monta_show.apply(self);} Monta.addEventListener(this.elem,'click',listner,true); } }
ここまでをMonta.jsとして保存。
<html> <head> <style> div.mino { padding: 0.5em; border : outset 1px; color : #000; } span.monta { background-color: #000; color:#000; } </style> <script type="text/javascript" src="Monta.js"></script> </head> <body> <div class="mino"> もんたメソッドのモジュールの見え方は3種類。<br> 一つ目は<span id='show'>紙をめくる様にみえる</span>という見せ方。<br> 二つ目は<span id='reverse'>逆からアシスタントにめくって貰う様にみえる</span>という見せ方。<br> 三つ目は<span id='fade'>文字列を隠していた物が、薄く消えていく</span>という見せ方。<br> <br> お好きな見せ方でどうぞ。 </div> </body> </html> <script> var mino = new Monta('show'); mino.show(); var monta = new Monta('reverse'); monta.reverse(); var minomonta = new Monta('fade'); minomonta.fade(); </script>
使い方はhtmlを作って見てもらえば早いと思うけど、みのもんたな見せ方をしたいところをspanタグで囲んでidをつける。でMontaをnewする引数にそのidを渡す。で見せ方は、showかreverseかfadeを選んで呼び出すと、身のもんたな見せ方が出来ます。同じidをつけるとバグります。(IEでの見え方がこれはこれで面白いので放置)
span.montaなcssを作っておくのを忘れずに。動作確認はIE6,7、FireFox2.0でしました。
元々は、弾さんが404 Blog Not Found:javascript+CSS - お手軽もんたメソッドでやっていた物を、ちょっと書き換えました。
これを使うと学生時代にやってたマーカーで線を引いて、赤い下敷きで隠しながらのお勉強ができるなぁ、なんて思った。
