jquery製ツンデレジェネレータのソースを晒してみる
クリスマスを乗り切るために「ツンデレジェネレータ」を作ってみた
ツンデレジェネレータ
以下3つ修正。
- heightの長い画像が画面からはみ出るバグ
- タイマー系の不具合(連続的にツン・デレしてしまう)
- ツンデレしやすいように何もないところクリックでスネる機能追加
コメントをふんだんに入れたのはあ、あんたのためなんかじゃないんだけど、ついでだしjqueryで書いたコードも晒しておくわね。
べっ、べつにid:dankogaiとかjquery使いの他の誰かに添削してほしいわけじゃないんだからね!
tundere.js
//imgScaleはDB格納のためテンプレのbodyで宣言 //randomBaseとrandomFactorはコンソールから変更する用にグローバル変数 var randomBase = 3000; //ランダム基数 var randomFactor = 4000; //ランダム係数 var timerId; //ツンタイマー //---イベント処理--- //初回読み込み時処理 $(function(){ //画像サイズ調節 resizeImg(); //ツンdivにマウスオーバーしたらデレに変更 $('#tun_div').mouseover(function(){ changeFace($('#tun_div'),$('#dere_div')) }); //デレdivにマウスオーバーしたらツンタイマーリセット $('#dere_div').mouseover(function(){ clearTimeout(timerId); timerId = null; }); //両divからマウスが離れたらツンタイマースタート $('.img_container').mouseout(function(){ timerId = setTimeout(function(){ changeFace($('#dere_div'),$('#tun_div')); timerId = null; }, Math.random()*randomFactor+randomBase); }); //winodwの何もないところクリックでツンに変更 $(window).click(function(){ changeFace($('#dere_div'),$('#tun_div')); timerId = null; console.log(timerId); }); //ウィンドウのサイズ変化時処理 $(window).resize(function(){ resizeImg() }); }); //---以降は関数宣言--- // 画像サイズをウィンドウサイズに合わせる var resizeImg = function(){ var newHeight, newWidth, opObj; var frontImg, backImg; // 最大値を幅と高さどっちにあわせるか選択 if(imgScale==0){//width>heightの場合:幅 newHeight = 'auto'; newWidth = $(window).width() + 16; opObj = {width:newWidth}; }else if(imgScale==1){//height>widthの場合:高さ newHeight = $(window).height() + 16; newWidth = 'auto'; opObj = {height:newHeight}; } // タイマーの値で前面と背面のdivを識別 if(timerId > 0){ frontImg = $('#dere_img') backImg = $('#tun_img') }else{ frontImg = $('#tun_img') backImg = $('#dere_img') } // 負荷減少のため前面divのみアニメーションでサイズ変更 frontImg.animate(opObj, "slow"); backImg.css('width', newWidth).css('height', newHeight); } // フェード効果を使ってイメージを切り替える var changeFace = function(currentDiv,nextDiv){ nextDiv.fadeIn("slow"); currentDiv.fadeOut("fast"); }
08/12/31 04:58追記