横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(一覧選択)
jQueryの書き方 |
/* ---------------------------------------* // 31-13) 1.パネルをマウスオーバーでスライドさせる * -----------------------------------------*/ var i=1; $("#mode_3113-list li").mouseover(function(){ //alert($("#mode_3113-list li").index(this)); i =$("#mode_3113-list li").index(this); $("#mode_3113-list li").removeClass("current"); $("#mode_3113-list li").eq(i).addClass("current"); $(".mode_3113-img-item").css("display","none"); $(".mode_3113-img-item").eq(i).css("display","block"); }); /* -----------------------------------------* // 31-13) パネルを自動的にスライドさせる * -----------------------------------------*/ $("#btn3113").click(function(){ $(".mode_3113-img-item img").css("width","50px"); $(".mode_3113-img-item img").css("height","50px"); $(".mode_3113-img-item").css("display","none"); $(".mode_3113-img-item").eq(i).css("display","block"); $(".mode_3113-img-item img").animate({"width":"350px","height":"300px"},500); $("#mode_3113-list li").removeClass("current"); $("#mode_3113-list li").eq(i).addClass("current"); //listのスクロール処理 if( i++ == imax ){i=0;} });br /> var timerID1 = setInterval(function(){ $("#btn3113").click(); },5000); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-13. 画像の表示部 -------------------------------------------------------- */ #mode_3113-img{ width:350px; float:left; height:425px; background-color:#000; overflow:hidden; position:relative; } #mode_3113-img img{ margin:0; } #mode_3113-img p{ padding:10px 8px; font-size:14px; line-height:20px; /*background-color:#000;*/ color:#fff; margin:0; } #mode_3113-img p span{ font-weight:bold; } #mode_3113-img p span a, #mode_3113-img p span a:active, #mode_3113-img p span a:visited{ color:#7d7137; } #mode_3113-img p span a:hover{ color:#d7cea8; } /*------------------------------------------------------- 31-13. 画像の選択部 -------------------------------------------------------- */ #mode_3113-list{ float:right; width:280px; } #mode_3113-list ul{ padding:0; margin:0; } #mode_3113-list ul li{ border-bottom:dashed 1px #999; padding:3px 3px 6px 17px; _padding:3px 3px 3px 18px; margin:0px 0px 0px 0px; _margin:0px 0px 0px 0px; height:47px; } * html #mode_3113-list ul li{ height:56px; } #mode_3113-list ul li h3{ font-size:13px; line-height:14px; font-weight:normal; margin:0; padding-top:4px; } #mode_3113-list ul li h3 a{ color: #000000; } #mode_3113-list ul li h3 span{ font-size:12px; font-weight:normal; color:#7d7137; display:block; } #mode_3113-list ul li.current{ background:url("../images/feature-back.jpg") no-repeat scroll left center transparent; font-weight:bold; } #mode_3113-list ul li.current h3{ font-weight:bold; color:#7d7137; } #mode_3113-list ul li.current h3 a{ font-weight:bold; color:#7d7137; } #mode_3113-list ul li.current h3 span{ font-weight:normal; } /*------------------------------------------------------- 31-13. 画像の選択 -------------------------------------------------------- */ .mode_3113-img-item{ display:none; left:0px; top:0px; position:absolute; } |
HTMLの書き方 |
<div id="mode_3113"> <div id="mode_3113-img"> <div class="mode_3113-img-item " style="display:block;"> <a href="motn31-02.html"><img src="../images/gval-001.jpg" alt="" width="350" height="305" /></a> <p>札幌市時計台は ・・・</p> </div> <div class="mode_3113-img-item"> <a href="motn31-02.html"><img src="../images/gval-002.jpg" alt="" width="350" height="305" /></a> <p>さっぽろ雪まつり ・・・</p> </div> <div class="mode_3113-img-item"> <a href="motn31-02.html"><img src="../images/gval-003.jpg" alt="" width="350" height="305" /></a> <p>約4,500店ともいわれる ・・・</p> --- 省略 --- </div> <div id="mode_3113-list"> <ul> <li class="current"> <h3><a href="motn31-01.html"><span>[ JR札幌 ]</span>観光施設 </a></h3> </li> <li> <h3><a href="motn31-02.html"><span>[ 大通公園 ]</span>「さっぽろ雪まつり</a></h3> </li> <li> <h3><a href="motn31-03.html"><span>[ すすきの ]</span>今でも深夜 </a></h3> </li> </ul> --- 省略 --- </div> </div> |
札幌市時計台は、北海道大学の前身である札幌農学校の演武場として明治11(1878)年10月に建設されました。 演武場は生徒の兵式訓練や心身鍛錬の場であるとともに、入学式、卒業式など農学校の中央講堂として使用されました …»もっと読む
「さっぽろ雪まつり」「さっぽろライラックまつり」、「YOSAKOIソーラン祭り」などのイベント会場などのほか、夏のビアガーデンや盆踊り大会 、 冬の雪まつりやホワイトイルミネーションの会場としても使用され、札幌観光の顔ともいうべき …»もっと読む
約4,500店ともいわれる飲食店や娯楽施設がひしめく東京以北最大、日本3大歓楽街のひとつとして数えられる街、すすきの。 「ラーメン横丁」など、北海道を代表する味覚スポットも数多く、季節を問わず、多くの人で賑わっています。 …»もっと読む
明治9年、開拓使麦酒醸造所として発足したサッポロビール発祥の地に建てられた総合商業施設。 歴史的な赤レンガの建物を生かしてショッピングモール、レストラン、ホテル、フィットネスクラブなど、さまざまな施設を配置 …»もっと読む
赤レンガの開拓使館で工場直送の生ビールとジンギスカンを味わえるビール園。 広い敷地内には、大正元年製造の仕込み釜がある「ケッセルホール」「トロンメルホール」をはじめ、「ポプラ館」「ライラック」の他に …»もっと読む
雪印メグミルク株式会社の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む