- ベストアンサー
画像の切り替え。もっと効率の良い書き方は？
- LightBoxに対抗するわけではありませんが、画像を切り替えるものを書いてみました。思いのほか、コードの量が多くなったような気がします。まだオブジェクトの考え方があまいのか・・・。もっと効率的な書き方があったら教えていただけませんか？
- <html><body><div>効率的にそして最良のものをもとめて！<img src="./img/img0.jpg" width="300" height="200" id="im0" onClick="new changeImage( 'im0','im1',4,20 )"><img src="./img/img1.jpg" style="display:none" id="im1" onClick="new changeImage( 'im1','im0',4,20 )"></div><script>/*@cc_on@*/function changeImage( elementId0, elementId1, step, wtime ){this.go = function(){this.obj0.style.top = ( this.cy - ( this.hy += this.sy ) ) + 'px';this.obj0.style.left = ( this.cx - ( this.hx += this.sx ) ) + 'px';this.obj0.style.width = ( this.hx * 2 ) + 'px';this.obj0.style.height = ( this.hy * 2 ) + 'px';setOpacity( this.obj0, this.obj0_opacity -= this.op );setOpacity( this.obj1, this.obj1_opacity += this.op );if( this.obj0_opacity <=1 ) {this.obj0.style.display = 'none';clearInterval( this.tmid );}}this.obj0 = ( typeof( elementId0 ) == 'string' )? document.getElementById( elementId0 ): elementId0;this.obj1 = ( typeof( elementId1 ) == 'string' )? document.getElementById( elementId1 ): elementId1;this.hx = (this.obj0.offsetWidth / 2 |0);//imgの半分this.hy = (this.obj0.offsetHeight /2 |0);this.cx = this.obj0.offsetLeft + this.hx;//imgの中心this.cy = this.obj0.offsetTop + this.hy;this.sx = this.obj0.offsetWidth / (400 / step);//大きくなる量this.sy = this.obj0.offsetHeight / (400 / step);this.op = step;//透明の量setOpacity( this.obj0, this.obj0_opacity =100 );setOpacity( this.obj1, this.obj1_opacity =0 );this.obj1.style.top = this.obj0.style.top = this.obj0.offsetTop + 'px';this.obj1.style.left = this.obj0.style.left = this.obj0.offsetLeft + 'px';this.obj1.style.width = this.obj0.style.width = this.obj0.offsetWidth + 'px';this.obj1.style.height = this.obj0.style.height = this.obj0.offsetHeight + 'px';var style = /*@if(1)this.obj0.currentStyle@else@*/ document.defaultView.getComputedStyle(this.obj0, '')/*@end@*/;this.obj1.style.display = style.display;this.obj1.style.position = style.position;this.obj0.style.position = 'absolute';this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);function setOpacity( obj , n ){if(n<0) n=0;if(n>100) n=100;/*@if(1) obj.style.filter = 'alpha(opacity='+ n+ ')'; @else @*/obj.style.MozOpacity = ( n / 100);obj.style.opacity = ( n / 100);/*@end@*/}}</script>
- JavaScript
- 回答数11
- ありがとう数12
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
これ、座標計算めんどくさいですね・・・。 とりあえず、既存の動きと同じ動きをするように変えてみました。 <html> <body> <div onclick="changeImage(this,4,20)"> <img src="img0.jpg" width="300" height="200"> <img src="img1.jpg" style="display:none"> </div> <script> function changeImage(r,R,D){V=[],o='offset',O=r.childNodes,s='style',w='idth',W=o+'W'+w,h='eight',x=100 H=o+'H'+h,p='position',d='display',w='w'+w,h='h'+h,T=o+'Top',t='opacity',L=o+'Left' for(i=0;i<O.length;i++){M=O.item(i);M.tagName=='IMG'?V.push(M):0}v=V.length for(i=0;i<v;i++){if(V[i][s][d]!='none')e=V[i],E=V[i+2>v?0:i+1]}function U(){ X=400/R,e[s].top=e[T]-e[H]/X,e[s].left=e[L]-e[W]/X,e[s][w]=e[W]+e[W]/X*2;e[s][h]=e[H]+e[H]/X*2 u(e,z-=R);u(E,Z+=R);if(z<=1)e[s][d]='none',E[s][d]='',clearInterval(P)} u(e,z=x);u(E,Z=0),E[s].top=e[s].top=e[T],E[s].left=e[s].left=e[L],E[s][w]=e[s][w]=e[W];E[s][h]=e[s][h]=e[H] var S=e.currentStyle||document.defaultView.getComputedStyle(e,'');E[s][d]=S[d] E[s][p]=S[p];e[s][p]='absolute';P=setInterval(function(){U()},D),function u(r,n){ n=(n<0)?0:n>x?x:n,a=n/x,r[s].filter='alpha('+t+'='+n+')';r[s].MozOpacity=a;r[s][t]=a}} </script> 関数部分コード数874byte[改行コードCrLf] あと何作るんでしたっけ・・・(；￣－￣) もう疲れたんですけど・・・。
その他の回答 (10)
- t_netbug
- ベストアンサー率34% (15/44)
function changeImage(r,R,D){V=[],o='offset',O=r.childNodes,s='style',w='idth',W=o+'W'+w,h='eight',x=100 H=o+'H'+h,p='position',d='display',w='w'+w,h='h'+h,T=o+'Top',t='opacity',L=o+'Left' for(i=0;i<O.length;i++){M=O.item(i);M.tagName=='IMG'?V.push(M):0}v=V.length for(i=0;i<v;i++){if(V[i][s][d]!='none')e=V[i],E=V[i+2>v?0:i+1]}function U(){ X=400/R,e[s].top=e[T]-e[H]/X,e[s].left=e[L]-e[W]/X,e[s][w]=e[W]+e[W]/X*2;e[s][h]=e[H]+e[H]/X*2 u(e,z-=R);u(E,Z+=R);if(z<=1)e[s][d]='none',E[s][d]='',clearInterval(P)} u(e,z=x);u(E,Z=0),E[s].top=e[s].top=e[T],E[s].left=e[s].left=e[L],E[s][w]=e[s][w]=e[W];E[s][h]=e[s][h]=e[H] var S=e.currentStyle||document.defaultView.getComputedStyle(e,'');E[s][d]=S[d] E[s][p]=S[p];e[s][p]='absolute';P=setInterval(function(){U()},D);function u(r,n){ n=(n<0)?0:n>x?x:n,a=n/x,r[s].filter='alpha('+t+'='+n+')';r[s].MozOpacity=a;r[s][t]=a}} Firefoxで動かない部分があったので一文字修正 changeImage分まで短くしたら、他の人が使う時わかりにくいと思うんですが。 その辺のこだわり方から察するにpipiさんの仕事ってプログラマーではなさそうですね。 簡単な事しかしていないので勉強も解析の必要もないですよ(笑) 了解です！(＞∇＜)ヽ 暇があったら見に行きます！
お礼
はぁ～疲れた！結局 t_netbug様謹製のものより短くできませんでした！893byteです。先週のアクセスランキングでは２位で注目を 浴びている(?)かもしれませんが、このコードを使って模範解答する 人はいないでしょうね～！;_; (ちなみに「カレンダーを作るには」の返り咲きを一人で狙ってます！） <html> <img src="./img0.jpg" width="300" height="200" id="im0" onClick="new changeImage( 'im0','im1',4,20 )"> <img src="./img1.jpg" style="display:none" id="im1" onClick="new changeImage( 'im1','im0',4,20 )"> <script> function changeImage(a,b,t,w){ this.g=function(a,b,x,y,o,q){q=a[S];q[I]=a[T]-y+X;q[l]=a[L]-x+X;q[G]=a[W]+x*2+X;q[h]=a[H]+y*2+X;if(z(a,b,this.o-=o)|this.o<=1){a[S][E]='none';clearInterval(this.i)}} var O='offset',A='pacity',B=100,D='position',E='display',I='top',L=O+'Left',l='left',Z='eight',h='h'+Z,H=O+'H'+Z,S='style',Z='idth',G='w'+Z,W=O+'W'+Z,T=O+'Top',X='px', a=$(a),b=$(b),c=b[S],e=a[W],f=a[H],g=400/t,s=a.currentStyle||document.defaultView.getComputedStyle(a,'');c[I]=a[S][I]=a[T]+X;c[l]=a[S][l]=a[L]+X;c[G]=a[S][G]=e+X; c[h]=a[S][h]=f+X;c[E]=s[E];c[D]=s[D];a[S][D]='absolute';function $(a){return document.getElementById(a);} this.o=B;this.i=setInterval((function(f,a,b,c,d,e){return function(){f.g.call(f,a,b,c,d,e);}})(this,a,b,e/g,f/g,t),w); function z(a,b,c){z(a[S],c=c<0?0:(c>B)?B:c);z(b[S],B-c);function z(a,b){a.filter='alpha(o'+A+'='+b+')';a['MozO'+A]=a['o'+A]=b/B}} }
- t_netbug
- ベストアンサー率34% (15/44)
おひさです！ ><img>タグのSRCをいじれば、画像を代えられる。 >このときに効果をつけて代えられればOK! >イベントなどは、onmouseoverだろうがonclickだろうが関係なし。 この辺は分かるのですが、 >とにかく、imageChange(対象ID,画像,効果,オプション)みたいに。 >画像を切り替えるためには、<img>が２つ必要。 例えば画像の数が10枚の時、どうなります？ まさかscriptタグ内のコードの中で呼び出す画像名を定義するんですか？ コードを圧縮して、難解なコードにする事を考えると得策ではないですよね？ まぁ今回は自分だけが使い、コードの変更をするのですし、構わないと言えば構わないと思うのですが、仕事柄(へぼプログラマーデス)他の人が使用する時、出来るだけ手間をかけない作りにしておきたいなぁと思うのです＞_＜ 今日が終われば土曜日！ コードを組み立てるのが楽しみです！
お礼
う～ん <div id=omote"> <img id=a1 <img id=a2 display:none <img id=a3 display:none </div> こっちでいこうか？ omote の下に同じ大きさのレイヤーを作って、それを対象とすれば いいか！^^; 楽そうだし 悩むな～
補足
あ～意味がわかった。 <div> <img id=a1 <img id=a2 <img id=a3 </div> で入れかえるね！ それなら単に <img id="bigphoto" onClick = imageChange(this, 'a b c'.split(' ')[(++n)%3]+'.jpg', ～ でいいんじゃない？ (いまのままだとノードを消したとき自分自身のonclickが消えちゃうけど;_;) もしくは、<img>を透明にして事実上消したことにして、 その下にレイヤーを作り、その画面を、ターゲットにするとか？ 考えてたのはね～ <div> <div> <img id="bigphoto" </div> <ul> <li><a onclick="imageChange('bigphoto', 'abc.jpg'～ <li><a onclick="imageChange('bigphoto', 'abc.jpg'～ <li><a onclick="imageChange('bigphoto', 'abc.jpg'～ <ul> <div> で良いんじゃないかと・・・。
- t_netbug
- ベストアンサー率34% (15/44)
><img src="a.jpg" id="b"> >HTMLの記述はこれだけにして >changeImage('b','c.jpg',effectNo,parameter_1,parameter_n,..) >みたいな記述で変更できるやつ！ スイマセン、ちょっと理解しきれないのでもう少し詳しくお願いできますでしょうか？ ええと記述は <html> <body> <img src="a.jpg" id="b" onclick="changeImage(param…)"> <script> var changeImage(… </script> </body> </html> で、関数内でcreateElement('img')で生成するって事ですか？ 定義内容の書き方が自分もあいまいでしたね。 呼び出し方について img要素を内包する要素から呼び出すのか、img要素から呼び出すのか パラメータについて この辺はご自由にという感じでしょうかね？ とりあえず、自分の意見をば 自分的には今後も考えるとdiv要素にonclickで呼び出させておいた方が無難かと。 div内に別のJavaScriptからの捜査、あるいは改変による記述などからimg要素が挿入された時に、記述の手間など気にしなくて済むからです。 エフェクトのパターンより、まずは基盤を決めましょ！ 画面のエフェクトなどは、今までのプログラムではあまり行ってきてなかったので、勉強させていただきます！ ええと、仕事は終わったのですが、帰ります。
お礼
説明下手で申し訳ない。 <img>タグのSRCをいじれば、画像を代えられる。 このときに効果をつけて代えられればOK! だからイベントなどは、onmouseoverだろうがonclickだろうが関係なし。 とにかく、imageChange(対象ID,画像,効果,オプション)みたいに。 画像を切り替えるためには、<img>が２つ必要だ。 たとえば、2枚目の画像が流れるテロップのように右から流れてくる そのとき、窓枠の中でスクロールしてくれないと不自然。 なので、1枚目の画像の外側にsapnでエレメントを作る その中に、1枚目と2枚目を子ノードとして入れ込む。 それからエフェクトを呼び出す。見たいな手順で行こうと考えました。
補足
<html> <img src="img0.jpg" width="300" height="200" id="im0"> <input type="button" value="すぐ" onClick="changeImage( 'im0','src=img1.jpg',0)"> <input type="button" value="じんわり" onClick="changeImage( 'im0','src=img0.jpg',1)"> <input type="button" value="じんわり" onClick="changeImage( 'im0','src=img2.jpg',1)"> <script> function changeImage( targetId, originalId, effectType ){ this.go = function( effectType ){ var endFlag; switch( effectType ){ case 1: this.opacity += this.base; setOpacity( this.original, this.opacity ); if( this.opacity<1 || this.opacity>99 ) endFlag = true; break; } if( --this.count<0 || endFlag ){ clearInterval( this.tmid ); var tmpId = this.tgtElement.id; parent.removeChild( this.tgtElement ); this.original.id = tmpId; return; } } var targetElement = ( typeof( targetId ) == 'string' )? document.getElementById( targetId ): targetId; // text_id or element_id //originalId のオブジェクトを見つける。もし textで src=imageFile.jpg のような書式なら、イメージを生成する var original; if( typeof( originalId ) == 'string' ){ var tmp_chk_str = originalId.toLowerCase(); var tmp_src; if( (tmp_chk_str+'') != '' && (tmp_src = tmp_chk_str.match(/^src\s*=\s*(.+)\s*$/)) ) { var tmp_element = document.createElement( 'img' ); tmp_element.style.display = 'none'; tmp_element.alt = tmp_src[1]; tmp_element.src = tmp_src[1]; original = tmp_element; } else { original = document.getElementById( originalId ); } } else { original = originalId; } if( !original ) return false; //もし親のクラス名が "ChangeImageWindow" 以外なら span で囲む var parent, tmp_parent = targetElement.parentNode; if( tmp_parent.className != 'ChangeImageWindow' ){ parent = document.createElement( 'span' ); parent.className = 'ChangeImageWindow'; parent.style.width = targetElement.offsetWidth + 'px'; parent.style.height = targetElement.offsetHeight + 'px'; parent.style.position = 'relative'; parent.style.overflow = 'hidden'; // parent.style.border= '1px red solid'; parent = tmp_parent.insertBefore( parent, targetElement ); parent.appendChild( targetElement ); } else parent = tmp_parent; targetElement.style.position='absolute'; targetElement.style.zIndex = 0; //オリジナルを親の子供にする。隠したまま original.style.display = 'none'; original.style.position = 'absolute'; // original.style.top = parent.offsetTop +'px'; // original.style.left = parent.offsetLeft +'px'; original.style.width = parent.offsetWidth + 'px'; original.style.height = parent.offsetHeight + 'px'; parent.appendChild( original ); this.oya = parent; this.original = original; this.tgtElement = targetElement; switch( effectType ){ case 0: original.style.display = 'block'; original.style.zindex =1; var tmpId = targetElement.id; parent.removeChild( targetElement ); original.id = tmpId; this.count =0; return; case 1: original.style.zIndex = 1; this.count = 34; this.opacity = 00; this.base = 3; setOpacity( original, this.opacity ); original.style.display = 'block'; break; } if( this.count ) this.tmid = setInterval((function(f_,ty_){ return function(){ f_.go.call(f_,ty_);}})( this, effectType), 30); function setOpacity( element, opacity ){ if( opacity<0 ) opacity =0; else if( opacity>100 ) opacity = 100; element.style./*@cc_on @if(1) filter = 'alpha(opacity='+ opacity + ')' @else@*/ MozOpacity = element.style.opacity = opacity / 100/*@end@*/; } } </script>
- t_netbug
- ベストアンサー率34% (15/44)
もしや、12時起床ですか？ とりあえず作成するプログラムの定義を決めて欲しいかな～と思います。 決まってないのであれば、パラメータなどは自由に書かせて頂こうと思います。 先ほど突然、仕事がドドーっと入ってきたので後ほど！
補足
<img src="a.jpg" id="b"> HTMLの記述はこれだけにして changeImage('b','c.jpg',effectNo,parameter_1,parameter_n,..) みたいな記述で変更できるやつ！ これならいろいろな画像の入れ替えの時、エフェクトが組み込めるのでは？ 画像だけでな<div>なんかもできれば最高かも？！ まず、 ターゲットとするイメージと同じ大きさのオブジェクトを作り、 それを親としターゲットを親の子供としてしまう その親の窓の中に、交換するイメージオブジェクトをつくり、 エフェクトをつけて交換する っていうのはどうでしょう？ switch( effectNo ) case 0: ただ単に入れ替える case 1: 透明にして切り替える case 2: 白い画面にして、裏に入れ、白い画面をフェードアウトする case 3: 拡大しながら切り替わる case 4: 縮小しながら切り替わる case n: おまかせ！
- t_netbug
- ベストアンサー率34% (15/44)
む、負けてる・・・。 昨日の夜にDS版ぷよぷよを我慢して作ってました。 function changeImage(u,U,v,V){ function Z(z){return typeof(z)=='string'?document.getElementById(z):z} var P = this,p='px',w='idth',l='eft',r='ight',h='e'+r,t='op',o='offset' W=o+'W'+w,L=o+'L'+l,H=o+'H'+h,R=o+'R'+r,T=o+'T'+t,w='w'+w,l='l'+l,h='h'+h r='r'+r,t='t'+t,s='style',y=100,q='position',O='display' P.Q = function(){with(P){d[s][t]=(B-(A+=C))+p,d[s][w]=(a*2)+p,d[s][l]=(b-(a+=c))+p,d[s][h]=(A*2)+p} X(P.d, P.n -= P.x);X(P.D, P.N += P.x);if(P.n<=1) {P.d[s][O]='none';clearInterval(P.m)}} P.d=Z(u),P.D=Z(U),P.a=(P.d[W]/2|0),P.A=(P.d[H]/2|0) with(P){b=d[L]+a,B=d[T]+A}Y=400/v,P.c=P.d[W]/Y,P.C=P.d[H]/Y,P.x=v X(P.d,P.n=y),X(P.D,P.N=0) with(P){D[s][t]=d[s][t]=d[T]+p,D[s][l]=d[s][l]=d[L]+p,D[s][w]=d[s][w]=d[W]+p,D[s][h]=d[s][h]=d[H]+p} var S = P.d.currentStyle||document.defaultView.getComputedStyle(P.d,'') P.D[s][O]=S[O];P.D[s][q]=S[q];P.d[s][q]='absolute' P.m=setInterval((function(f_){return function(){f_.Q.call(f_);}})(P),V); function X(obj,n){n=n<0?0:(n>y?y:n);with(obj[s]){filter='alpha(opacity='+ n+ ')';MozOpacity = opacity = (n/y)}} } クリック連打で拡大するのは仕様じゃなかったんですね…。 とりあえず、既存のソースを短くし尽したら自分のソースを書いていこうと思っているんですけど、引数の型、呼び出し方など定義はありますか？？
お礼
重大なことに気づいてしまった！ 「この回答は参考になった」のボタンだけど これじゃ～自分が書いたコードへの評価がつかないじゃないかぁ～！ ;_; しかも、だれも参考してないようだし・・・;_;
補足
超～眠いっす。まだまだ長いようですなぁ。 オブジェクト化したらコンパクトになるかと 思ったらそうでもないです。 引数の型ね～。決めてない。 というか希望としては、複数同時進行可能なタイプ！ 現在でもそれで動くけど、それくらい。 あと、拡大して消えるほかに、最後の引数を追加しました。 これで縮小して消えるができます。 function changeImage2( elementId0, elementId1, step, wtime, flag ){ this.go = function(){ var f0 = this.flag? 1: -1; var f1 = this.flag? 2:-1.5; this.obj0.obj.style.top = this.obj0.obj.offsetTop - this.obj0.sy *f0 + 'px'; this.obj0.obj.style.left = this.obj0.obj.offsetLeft - this.obj0.sx *f0 + 'px'; this.obj0.obj.style.width = this.obj0.obj.offsetWidth + this.obj0.sx *f1 + 'px'; this.obj0.obj.style.height = this.obj0.obj.offsetHeight + this.obj0.sy *f1 + 'px'; var tmp = this.obj0.opacity - this.obj0.op; this.obj0.setParameter( tmp ); this.obj1.setParameter( 100 - tmp ); if( tmp <=1 ) { this.obj0.obj.style.display = 'none'; clearInterval( this.tmid ); } } function img( elementId, opacity ){ this.setParameter = function( opacity, style ){ if( opacity == undefined || opacity < 0 ) opacity =0; else if( opacity > 100 ) opacity == 100; this.opacity = opacity; /*@if(1) this.obj.style.filter = 'alpha(opacity='+ opacity + ')' @else @*/ this.obj.style.MozOpacity = this.obj.style.opacity = ( opacity / 100)/*@end@*/; if( style != undefined ) this.style = style; } var tmp = step / 400; var obj = this.obj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; this.setParameter( opacity, /*@if(1)this.obj.currentStyle@else@*/ document.defaultView.getComputedStyle( this.obj, '' ) /*@end@*/ ); this.sx = obj.offsetWidth * tmp; this.sy = obj.offsetHeight * tmp; this.op = step; } function copyPosition( obj0, obj1, flag ){ if( obj1 == undefined ) obj1 = obj0; else flag = true; var obj = obj0.obj; with( obj1.obj.style ){ top = obj.offsetTop + 'px'; left = obj.offsetLeft + 'px'; width = obj.offsetWidth + 'px'; height = obj.offsetHeight + 'px'; if( flag ){ display = obj0.style.display; position = obj0.style.position; } } } this.obj0 = new img( elementId0, 100 ); this.obj1 = new img( elementId1, 0); this.flag = flag; copyPosition( this.obj0 ); copyPosition( this.obj0, this.obj1 ); this.obj0.obj.style.position = 'absolute'; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } </script>
- fujillin
- ベストアンサー率61% (1594/2576)
こんばんは また、面白いことを始めましたね。 先日のPSETを考えた時に、ようやく遅まきながらもオブジェクトやクラス定義とかprototype（←ライブラリではない）について調べ始めたところなので、大変興味深い題材なのですが、あいにくと、ここしばらくは時間が取れそうもないので、時々、様子を見に来るだけにしときます。 ろくにわかってないのに、勝手な感想を書くのは、はなはだ失礼ですが・・・ 今回の場合はIntervalで制御しているので、速度自体は極端に遅くない限りは問題にならないような気がしますね。 目指すところは、エレガントさということになるのかなぁ。 透明度の制御はブラウザによって違うみたいなので、このあたりも私には未知の領域です。・・・というより、「面倒くさいな～」 というのが本音。 ところで、「onClick="new changeImage(～～)"」って新しくオブジェクトができるような気がするのだけれど、それってそのまま放置？ なんとなく気持ち悪いような・・・あるいは、オブジェクトができているわけではないのかな？ 未熟なので、よくわかりません。
お礼
結局俺がハマっちまいました～！ エレガント！そう！そう言う言い回しですよ！ 短くしたらエレガントな回答は得られなくなりますよね～;_;
補足
＞また、面白いことを始めましたね。 流れだから！意図してませんからね^^; オブジェクトは、マジ勉強中！だから聞いてたんだけど・・。 this.i=setInterval((function(f){return function(){f.g.call(f);}})(this),w); こういう書き方もここでWernerさんに教えて頂いたし。 でも、きっと時間を割いてやるよね！^^; あと数人いたら絶対、一番目指すよね～。
- t_netbug
- ベストアンサー率34% (15/44)
確かに…書かないと書き込めないデスネ…。 ええとスイマセン、全然縮めてませんけどとりあえず…。 <html> <body> <div> <img src="img0.jpg" width="300" height="200" id="im0" onClick="new changeImage( 'im0','im1',4,20 )"> <img src="img1.jpg" style="display:none" id="im1" onClick="new changeImage( 'im1','im0',4,20 )"> </div> <script> /*@cc_on@*/ function changeImage(e0,e1,s,w){ var t=this,p='px' t.go=function(){ t0s.top=(t.C-(t.H+=t.S))+p t0s.left=(t.c-(t.h += t.s))+p t0s.width=(t.h*2)+p t0s.height=(t.H*2)+p setOpacity(t.o, t.o_opacity-=t.op ) setOpacity(t.O, t.O_opacity+=t.op ) if(t.o_opacity<=1){t0s.display='none';clearInterval(t.T)} } t.o=(typeof(e0)=='string')?document.getElementById(e0):e0 t.O=(typeof(e1)=='string')?document.getElementById(e1):e1 var t0=t.o,t1=t.O var t0s=t0.style,t1s=t1.style t.h = (t0.offsetWidth/2|0) t.H = (t0.offsetHeight/2|0) t.c = t0.offsetLeft+t.h t.C = t0.offsetTop+t.H z=400/s,Z=100 t.s = t0.offsetWidth/z t.S = t0.offsetHeight/z t.op = s setOpacity( t0, t.o_opacity =Z ) setOpacity( t1, t.O_opacity =0 ) t1s.top = t0s.top = t0.offsetTop + p t1s.left = t0s.left = t0.offsetLeft + p t1s.width = t0s.width = t0.offsetWidth + p t1s.height = t0sheight = t0.offsetHeight + p var s = t0.currentStyle || document.defaultView.getComputedStyle(t0,'') t1s.display = s.display t1s.position = s.position t0s.position = 'absolute' t.T = setInterval((function(f_){ return function(){ f_.go.call(f_)}})(t), w) function setOpacity( obj , n ){ n=n<0?0:(n>Z?Z:n) /*@if(1) obj.style.filter = 'alpha(opacity='+ n+ ')' @else @*/ obj.style.MozOpacity = ( n / Z) obj.style.opacity = ( n / Z)/*@end@*/ } } </script> 変数を縮めていくとかは簡単なんですけどね^^; 縮め方も中途半端ですが、ちょっと忙しかった(言い訳)ので…。 if(n<0)n=0; if(n>100)n=100; を n=n<0?0:(n>100?100:n); 変数に入れて短くする。 改行が入る場所は文末の;を除くくらいしかしてないです…。 pipiさんの進捗が気になるのでとりあえずアップ！
お礼
ハマっっちまった～！眠いぞ。 function changeImage(a,b,t,w){ this.g=function(a,b,sx,sy,op){ with(a.style){top=a.offsetTop-sy+d;left=a.offsetLeft-sx+d;width=a.offsetWidth+sx*2+d;height=a.offsetHeight+sy*2+d;} if(O(a,b,this.ao-=op)|this.ao<=1){a.style.display='none';clearInterval(this.i)}} this.ao=100; var a=$(a),b=$(b),d='px',e=a.offsetWidth,f=a.offsetHeight,g=400/t,s=a.currentStyle||document.defaultView.getComputedStyle(a,''); with(b.style){top=a.style.top=a.offsetTop+d;left=a.style.left=a.offsetLeft+d;width=a.style.width=e+d;height=a.style.height=f+d;display=s.display;position=s.position;} a.style.position = 'absolute'; this.i=setInterval((function(f,a_,b_,sx_,sy_,t_){return function(){f.g.call(f,a_,b_,sx_,sy_,t_);}})(this,a,b,e/g,f/g,t),w); function O(o,p,n){z(o,n=n<0?0:(n>100)?100:n);z(p,100-n);function z(o,n){with(o.style){filter='alpha(opacity='+n+')';MozOpacity=opacity=n/100}}} function $(d){return document.getElementById(d);} } 根本を見直すともうちょっと縮まるはず。今日はこれが限界！ それと画像が入れ替わる途中でclick連打でバグってる。また明日～！
補足
^^; あまいなぁ～ /*@if～はやめる！ with(o.style){filter='alpha(opacity='+n+')';MozOpacity=opacity=n/Z} みたいな・・・。 実は、いまだに進んでいません。 構造的にまだ甘いかもしれないと思って見直してます e0とe1を入れ子のオブジェクトにできそうかな～なんて だから時間をかけてやってください。 きっと誰かが・・・・。
- t_netbug
- ベストアンサー率34% (15/44)
お…、押したことないです…。そもそもそんな機能がある事をたった今しりましｔ…。 ショートコーディング頑張ってみます！ とりあえず仕事の合間に書いてみます！
お礼
#################################### 仕様というか希望がありました！ こんなところに書いて気づいてくれるかな？ <img src="a.jpg" id="b"> HTMLの記述はこれだけにして changeImage('b','c.jpg',effectNo,parameter_1,parameter_n,..) みたいな記述で変更できるやつ！ これならいろいろな画像の入れ替えが組み込めるのでは？ 画像だけでなくdivなんかもできれば最高かも？！ ###################################
補足
知らないことをもう一つ教えてあげましょう！ お題を提起した本人は、誰かの回答がなければ、自分のプログラムを 提示できません！なんともどかしいことかっ！^^;
- t_netbug
- ベストアンサー率34% (15/44)
プロのコードって読みやすさと拡張のしやすさじゃないですかね。 仕事柄、先輩の記述したコードを見る機会が多いですが、何をしているかが凄く理解しやすいです。 オブジェクト指向ですがpipiさんはもう理解出来ていると思いますよ！ 多分悩んでいるのは実装するための記述方法とかその辺じゃないかな～って思ってるんですけど…。 あ、ひとつ思った点なのですが、imgタグに記述されたonclickをdivにしてみてはいかがでしょう？ div要素内のimgが増えても対応出来るようにしておくと、使いやすそうだなって思います！ 極小コード楽しそうですよね！ 最近ShortCodingという本を読んでいますが、これが面白くて＞ｗ＜ pipiさんさえ良ければ、是非やってみたいです！
お礼
そうそう。新しいスレッドは立てないでこのまま継続しますよ！ 最初に間違ってhtmlの板に（極小コードPart1？）、書き込んだらすっげぇ～人たちが居たんですけど！（ここの板にも居るけどね。） 様子をみてみます。
補足
＞ShortCodingという本 買って読んでみようと思います^^; ＞imgタグに記述されたonclick あ～それね。普段はbodyにonclickをつけてそこだけで分岐するようにしてますが、面倒くさかったので！完成したあかつきには、直します。 初心者でも <img ～ onClick="new changeImage( 'im0','im1'～ <img ～ onClick="new changeImage( 'im1','im2'～ <img ～ onClick="new changeImage( 'im2','im3'～ とすれば、どんどん変わっていくのを見られると思ったので・・・。 ＞極小コード楽しそうですよね！ めちゃ楽しいです。そしてハイレベルの人たちにあきれる（善い意味で）ばかりです！ やってみましょう～！ 条件は、最初に提示したものとほぼ同じく動作するもの！ アルゴリズムは各自のアイディアで！ ie6以上とFirefoxで動作。 プログラムを書かなくても、見ている人が「この回答は参考になった」 というボタンを押してくれれば、閲覧者の評価がわかるのですが・・・ って押したことあります？
- t_netbug
- ベストアンサー率34% (15/44)
ちょっと動かさせて頂きましたが凄いですね、これ。 何を目指すのか知りたいです＞ｗ＜ 効率的というのは速度的にでしょうか？それともこんな神業を目指すって事でしょうか？↓ <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){for(l=228;i--;)Z[h+B[i]]=k=1;for(B=[[-7,-20,6,17,-9,3,6][t=++t %7]-4,0,1,t-6?-A:-1];l--;h=5)if(l%A)l-=l%A*!Z[l];else for(P+=k++,j=l+=A;--j>A;) Z[j]=Z[j-A]}h+=A}for(i=S="";i<240;X[i]=Z[i]|=++i%A<2|i>228)i%A?0:S+="<br>",S+=X [i]?"■":"＿";document.body.innerHTML=S+P;Z[5]||setTimeout(Y,99-P)}Y()</script> ショートコーディングを目指すなら楽しそうなので参加してみたいです^^
補足
＞何をめざすのか？ う～～～ん微妙。勉強のために！が一番合っているかな～。 もっとも「プロはこう書くんだよ！」みたいな。 その技を見たいのです。というかprototype.js なんかを読めって ことなんでしょうが・・・。 まだオブジェクト指向的なものがよくわからないというか、 もう応用が利かない頭になっていきたというか・・・。 極小コードですか？ いいですね～！ ある程度、時間をかけて小さくしてみますか！？ fujillinさんとかのってくるかな・・・・。 速度的には速いにこしたことはありませんが、コード的に 「美しい～！」と思えるような・・・。う～～ん言葉にできない。
お礼
お～ぅ、なんかびっしり詰まってるって感じでコナパクト！ 解析してみるかスルーするか微妙なコードの数ですね～！ じっくり勉強させていただきます！^^; 関数の名前は短くしなかったんですね！^^;(大笑) 休みを利用して、「カレンダーを作るには」 http://oshiete1.goo.ne.jp/qa4480952.html のプログラム書いてました！ 最初に、返事があっただけで、何もないから、ガンガン投稿してますが 暇なら、指摘してください！