- ベストアンサー
ホームページ作成で画像スクロールがうまくいきません
ホームページ作成で画像スクロールがうまくいきません http://www.beautrium.com/ 上記のページと画像は変えてまったく同じように作りたいのですが、flashを使わなけ れば無理なのでしょうか？ ご教授下さい 上記のページのように 画像を画面いっぱいにだし 同じスピードにしたいと思っております javascript css html を使っているのですが なかなか上手くいきません。 ちなみにfirefoxにも対応させたいと思っております 宜しくお願い致します。
- karatekidY
- お礼率66% (10/15)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
数値は適当に。リサイズ処理は自分でね。 <html> <head> <style> body{ overflow:hidden;margin:0px;} </style> </head> <body> <img src="hoge.jpg" id="i0" style="position:absolute; top:0px;left:0px; filter:alpha(opacity=0);MozOpacity:0;opacity:0"> <img src="hoge2.jpg" id="i1" style="position:absolute; top:0px;left:0px; filter:alpha(opacity=0);MozOpacity:0;opacity:0"> <img src="abc.jpg" width="200" height="24" alt="menu1" style="position:absolute;top:100px;left:10px;"> <img src="def.jpg" width="200" height="24" alt="menu2" style="position:absolute;top:150px;left:10px;"> <script> var imgid=0; window.onload=function(){ a=new setOpacity('i0',0,5,20); setInterval(move,200); setInterval(addid,10000); } function move(){ var obj=document.getElementById('i0'); obj.style.top=parseInt(obj.style.top)-1+'px'; var obj=document.getElementById('i1'); obj.style.top=parseInt(obj.style.top)-1+'px'; } function addid(){ a=new setOpacity(['i0','i1'][imgid],100,-5,20); b=new setOpacity(['i1','i0'][imgid],0,5,20); imgid=imgid?0:1; var obj=document.getElementById('i'+imgid); obj.style.top='0px'; } function setOpacity2( obj,opa ){ obj.style.filter = 'alpha(opacity='+ this.opacity+ ')'; obj.style.MozOpacity = this.obj.style.opacity = this.opacity / 100; } function setOpacity( id, opacity, step, wtime ){ this.opacitySet = function(n){ if( n != undefined ) this.opacity = n; this.obj.style.filter = 'alpha(opacity='+ this.opacity+ ')'; this.obj.style.MozOpacity = this.obj.style.opacity = this.opacity / 100; } this.go = function(){ this.opacitySet( this.opacity += this.step ); if( this.opacity<0 ) { this.opacitySet(0); clearInterval( this.tmid ); return; } if( this.opacity>100 ) { this.opacitySet(100); clearInterval( this.tmid ); return; } } if( id != undefined ) this.obj = document.getElementById( id ); if( opacity != undefined ) this.opacitySet( opacity ); if( step != undefined ) this.step = step; if( wtime != undefined ){ this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } } </script>
その他の回答 (2)
function setOpacity2( obj,opa ){ obj.style.filter = 'alpha(opacity='+ this.opacity+ ')'; obj.style.MozOpacity = this.obj.style.opacity = this.opacity / 100; } この部分はゴミです。削除してね。
お礼
まだ完成はしておりませんが大分できました。 ありがとうございます。 後は完成目指してがんばります。
こんにちは。 縦横違いますが、ニュアンス的これが近いかなと。
お礼
ありがとうございます このページは僕も見たのですが スピードはこれ以 上遅くならないのでしょうか？ javascriptで試したのですが http://www.beautrium.com/ のようにスムーズに流れてくれませんでした。 後、firefoxに対して、画像をいっぱいにはるのはどうしたらよいでしょう か？ もしよろしければご教授下さい
お礼
やっと理解できました。 ありがとうございます。 これからもよろしくお 願いいたします。
補足
熱心にありがとうございます 早速やってみます