スポンサーサイト

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

障子の開け閉めのスライドのソースはライブドアブログでは

 Gooブログではいろいろなセキュリティー上の制約で複雑な障子の開け閉めのソースも、ライブドアブログではすっきりと見やすくコーディングも楽だ。自分のソースにする時も楽だと思う。Gooブログでは動作しませんので念のため。
 インターネットエクスプローラとOperaで動作確認しましたが、safari、firefoxは動作しませんでした。研究課題です。

 画像の幅を500ピクセルにしてみました。

 ライブドアの私の実験サイト(昨日作りました)
http://blog.livedoor.jp/dongwcat/archives/51417508.html

以下ソース

<SCRIPT TYPE="text/javascript">
<!--
var pnum=0;
var henkanchu=0;
var mode=0;
var pos=0;

function openint() {
pos+=50;
husuma_L.style.left=-pos;
husuma_R.style.right=-pos;
if(pos==250) {
clearInterval(open_int);
henkanchu=0;
}
}
function closeint() {
pos-=50;
husuma_L.style.left=-pos;
husuma_R.style.right=-pos;
if(pos==0) {
clearInterval(close_int);
pnum++;
if(pnum>8) pnum=0;
for(i=0; i<9; i++) document.getElementById('p_idkey'+i).style.visibility='hidden';
document.getElementById('p_idkey'+pnum).style.visibility='visible';
henkanchu=0;
}
}
function hiraku() {
henkanchu=1;
open_int=setInterval('openint()',100);
}

function tojiru() {
henkanchu=1;
close_int=setInterval('closeint()',100);
}

function open_door() {
if(henkanchu==1) return;
if(mode==0){
hiraku();
mode=1;
}
else {
tojiru();
mode=0;
}

}
// -->
</SCRIPT>

<center>
<div style="position:relative; width:500px; height:400px; font-size:0px; color:white; overflow:hidden; ">
<img src="http://blogimg.goo.ne.jp/user_image/51/1b/18d82e6236f255c11cf53caf9246af39.png" style="position:absolute; top:-20px; left:-20px; width:600px; height:450px; z-index: 98; "/>
<img src="http://blogimg.goo.ne.jp/user_image/69/ff/a443e2f0dec894a507cb585ae2126e8a.png" id="husuma_L" style="position:absolute; left:0px; top:0px; width:250px; height:400px; z-index:99; " />
<img src="http://blogimg.goo.ne.jp/user_image/69/ff/a443e2f0dec894a507cb585ae2126e8a.png" id="husuma_R" style="position:absolute; right:0px; top:0px; width:250px; height:400px; z-index:99; " />
<img id="p_idkey0" src="http://blogimg.goo.ne.jp/user_image/6f/7c/fa92444ab0e0a197c5d909b819c919d5.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:visible; "/>
<img id="p_idkey1" src="http://blogimg.goo.ne.jp/user_image/23/12/570beb8a7fe2391a2d3badc9297086ec.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey2" src="http://blogimg.goo.ne.jp/user_image/1d/4b/444bf05b48d35bd21f6259c5716503af.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey3" src="http://blogimg.goo.ne.jp/user_image/49/46/e50dfcb04bc2be7da59fa8984d2831f4.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey4" src="http://blogimg.goo.ne.jp/user_image/5a/4c/8e2fb12cc0eacae4a9937ef77b698cab.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey5" src="http://blogimg.goo.ne.jp/user_image/46/ef/bd52f2eb7104fa7b531e6c3bfc12d050.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey6" src="http://blogimg.goo.ne.jp/user_image/16/ca/b3f81ce5b5d2325fcd8c458c362b4652.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey7" src="http://blogimg.goo.ne.jp/user_image/60/f5/e91f8135551b093589c1f930d512df52.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
<img id="p_idkey8" src="http://blogimg.goo.ne.jp/user_image/72/df/0eed16f27cdb61ab08f1ca401e89aa8a.jpg" style="position:absolute; left:0px; top:0px; width:500px; height:400px; visibility:hidden; "/>
</div>
<a href="#dummy" onclick="open_door();">障子を開けたり閉めたりする</a>
</center>

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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