スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

360度とぎれないスクロール

前回投稿しました途切れない360度スクロールのソースです。

 原理は意外と簡単で、360度の画像を用意して、それを2枚連続して絶対配置で並べて表示し、スクロールで途切れそうになると、もう一枚の位置を長さ分ずらしてスクロールする画像の前にはいちするという仕組みです。

 クリックごとの命令分岐は、flagというDiv領域の幅に格納された変数で変更します。クリックごとに値を切り替えて次の命令を決めています。

 下の例では360度の画像を3000ピクセル×300ピクセルの大きさの画像を画像URLのWEB上にアップロードしたものを使っています。使われる画像の幅に応じて3000という数値をすべて新たな幅に置換してやります。また窓の大きさは下の例では540×300ピクセルのウインドウにoverflow:hiddenの属性で表示していますので、これも画像の大きさに合わせて適当な値に変更する必要があります。

 一番難しいのは、連続した360度の画像を撮影して、画像レタッチソフトで重ね合わせて作ることですね。1回転の枚数を増やして、中央の部分をつなぎ合わせていけば、連結が楽です。撮影には三脚が必須ですね。

 挑戦してみてください(<>は半角に、改行はすべて削除すること)

<span style="font-size:1px;line-height:1px;color:black;">
<div style="background-color:black;padding:5px;width:550;height:312;">
<<div style="position:absolute;top:0;left:0;" id="flag" width=0 height=0></div>
<<div style="position:relative;width:540;height:300;overflow:hidden;" onclick="if(flag.width==0){timerID=setInterval('{s1=photo1.style.left; l1=s1.substr(0,s1.length-2);s2=photo2.style.left; l2=s2.substr(0,s2.length-2);if(l1==0){l2=3000;}if(l2==0){l1=3000;}l1-=2;l2-=2;if(l2==-3000){l2=3000;} photo1.style.left=l1;photo2.style.left=l2;}',5);flag.width=1;}else if(flag.width==1){clearInterval(timerID);flag.width=2;}else if(flag.width==2){timerID=setInterval('{s1=photo1.style.left; l1=s1.substr(0,s1.length-2);s2=photo2.style.left; l2=s2.substr(0,s2.length-2);l1-=0;l2-=0;if(l1==0){l2=-3000;}if(l2==0){l1=-3000}l1+=2;l2+=2;photo1.style.left=l1;photo2.style.left=l2;}',5);flag.width=3;}else{clearInterval(timerID);flag.width=0;}">
<<img id="photo1" src="画像URL" style="position:absolute;top:0;left:0;">
<<img id="photo2" src="画像URL" style="position:absolute;top:0;left:3000;">
</div>
</div>
</span>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。