説明文入りの半透明レイヤー上下の順に表示
説明文入りの半透明レイヤーを左または右に表示 <span class="left or left">
説明文入りの半透明レイヤーを左右上下に表示 <span class="left or left or bottom or top">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>slider jQuery plugin | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/s3Slider.js"></script> <script type="text/javascript"> $(function() { /* 例1 */ $('#slider').s3Slider({ timeOut: 3000 }); /* 例2 */ $('#slider1').s3Slider({ timeOut: 3000 }); /* 例3 */ $('#slider2').s3Slider({ timeOut: 3000 }); }); </script> <!-- CSS --> <style type="text/css"> ul, li { margin:0; padding:0; list-style:none; } /* 例1~3 */ #sliderContent, #slider1Content, #slider2Content { width:320px; position:absolute; top:0; margin-left:0; } .sliderImage, .slider1Image, .slider2Image { float:left; position:relative; display:none; } /* 例1 */ #slider { width:320px; /* 画像の幅 */ height:240px; /* 画像の高さ */ position:relative; overflow:hidden; } .sliderImage span { position:absolute; font:10px/15px Arial, Helvetica, sans-serif; padding:10px; width:300px; /* 画像の幅 - 左右内余白 320-(10*2) */ background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none; } /* 例2~3 */ #slider1, #slider2 { width:320px; /* 画像の幅 */ height:240px; /* 画像の高さ */ position:relative; overflow:hidden; } .slider1Image span, .slider2Image span { position:absolute; font:10px/15px Arial, Helvetica, sans-serif; padding:10px; width:300px; /* 画像の幅 - 左右内余白 320-(10*2) */ background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none; } .clear { clear:both; } .sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size:14px; } .top { top:0; left:0; } .bottom { bottom:0; left:0; } .left { top:0; left:0; width:110px !important; height:220px; } .right { right:0; bottom:5px; width:90px !important; height:220px; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://www.serie3.info/slider/'>slider jQuery plugin</a> | 設置サンプル</h1> <!-- CODE --> <!-- 例1 --> <h2>例1</h2> <p>説明文入りの半透明レイヤー上下の順に表示</p> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" /> <span class="top"><strong>くまさんケーキ</strong><br>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</span> </li> <li class="sliderImage"> <img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" /> <span class="top"><strong>Krispy Kreme Doughnuts</strong><br>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さでした。</span> </li> <li class="sliderImage"> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" /> <span class="bottom"><strong>CAFE EAT@代官山</strong><br>代官山アドレスにあるCafe eat。メロンソーダーとアイス・カフェオーレ!ドリンクが大きくて長居にはもってこい♪</span> </li> <li class="sliderImage"> <img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg" /> <span class="bottom"><strong>Giottoのケーキ</strong><br>ジョトォ 三越銀座店のケーキ。そびえたつモンブランが有名!上品なお味ですw</span> </li> <div class="clear sliderImage"></div> </ul> </div> <!-- 例1 / --> <!-- 例2 --> <h2>例2</h2> <p>説明文入りの半透明レイヤーを左または右に表示 <code><span class="left or left"></code></p> <div id="slider1"> <ul id="slider1Content"> <li class="slider1Image"> <img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" /> <span class="left"><strong>くまさんケーキ</strong><br>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</span> </li> <li class="slider1Image"> <img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" /> <span class="right"><strong>Krispy Kreme Doughnuts</strong><br>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さでした。</span> </li> <li class="slider1Image"> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" /> <span class="right"><strong>CAFE EAT@代官山</strong><br>代官山アドレスにあるCafe eat。メロンソーダーとアイス・カフェオーレ!ドリンクが大きくて長居にはもってこい♪</span> </li> <li class="slider1Image"> <img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg" /> <span class="left"><strong>Giottoのケーキ</strong><br>ジョトォ 三越銀座店のケーキ。そびえたつモンブランが有名!上品なお味ですw</span> </li> <div class="clear slider1Image"></div> </ul> </div> <!-- 例2 / --> <!-- 例3 --> <h2>例3</h2> <p>説明文入りの半透明レイヤーを左右上下に表示 <code><span class="left or left or bottom or top"></code></p> <div id="slider2"> <ul id="slider2Content"> <li class="slider2Image"> <img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" /> <span class="top"><strong>くまさんケーキ</strong><br>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</span> </li> <li class="slider2Image"> <img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" /> <span class="left"><strong>Krispy Kreme Doughnuts</strong><br>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さでした。</span> </li> <li class="slider2Image"> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" /> <span class="bottom"><strong>CAFE EAT@代官山</strong><br>代官山アドレスにあるCafe eat。メロンソーダーとアイス・カフェオーレ!ドリンクが大きくて長居にはもってこい♪</span></li> <li class="slider2Image"> <img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg" /> <span class="right"><strong>Giottoのケーキ</strong><br>ジョトォ 三越銀座店のケーキ。そびえたつモンブランが有名!上品なお味ですw</span> </li> <div class="clear slider2Image"></div> </ul> </div> <!-- 例3 / --> <!-- CODE / --> </div> </body> </html>