電子書籍の厳選無料作品が豊富！

自動でスライドし、伸び縮みするボックスを作りたい。

締切済

  • 質問者：akito-1
  • 質問日時：
  • 回答数：2件

自動でスライドし、伸び縮みするボックスを作りたい。

ソフトバンクの携帯用トップページ（http://mb.softbank.jp/mb/）の「キャンペーン・イベント情報」の部分のように、ボックス内の内容を自動でスライドさせ、全てを見るを押すとボックスが広がり内容が全て見えると云うような事をやりたいのですが、どうやるのでしょうか？

jQueryを使用していると言う事はなんとなくわかるのですが・・・
プログラミング初心者なので、ホームページのソースのどの部分が関係しているのかなど詳しく教えて頂けると幸いです。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： steel_gray
  • 回答日時：

#1の続き（JSファイルの中身）



function scrCtr(id,options){
var opt = {
id:'',
btnClsOpen:'.open',//表示ボタン
btnClsClose:'.close',//閉じるボタン
height:240,//スクロール範囲
val:80,//一回のスクロール量
interval:3000, //スクロール間隔(ミリ秒)
pos:0,
timerId:0
};
opt.id = id;
for(var x in options) {
opt[x] = options[x];
}
opt.timerId = setInterval(scrBlock,opt.interval);
function scrBlock(){
opt.pos += opt.val;
if(opt.height <= opt.pos){
opt.pos = 0;
$(opt.id+' div').animate({
duration:'fast',
top:opt.pos
});
} else {
$(opt.id+' div').animate({
duration:'slow',
top:- opt.pos
});
}
}
$(opt.id +' '+ opt.btnClsOpen).click(function(){
clearInterval(opt.timerId);
$(opt.id+' div').stop();
opt.pos = 0;
$(opt.id+' div').css('top',0);
$(opt.id).animate({
duration:'slow',
height:$(opt.id+' div').height()
});
$(this).hide();
$(opt.id +' '+ opt.btnClsClose).show();
});
$(opt.id+' '+opt.btnClsClose).click(function(){
$(opt.id).animate({
duration:'slow',
height:opt.val
});
$(this).hide();
$(opt.id +' '+ opt.btnClsOpen).show();
opt.timerId = setInterval(scrBlock,opt.interval);
});

}
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： steel_gray
  • 回答日時：

結構いい加減ですが一応サンプル（文字数制限のため２回に分けます）



<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
a img {
border:none;
}
#sample {
width:730px;
height:80px;
overflow:hidden;
border:solid thin black;
position:relative;
}
#sample div{
position:absolute;
top:0;
left:0;
width:640px;
padding:0 0 0 5px;
}
#sample div p{
text-align:right;
margin:0;
padding:0 10px 10px 0;
}
#sample ul{
margin:0;
padding:0;
list-style-type:none;
}
#sample li{
float:left;
margin:10px 5px;
}
#sample li img{
vertical-align:top;
}
#sample ul + *{
clear:both;
}
.button {
position:absolute;
margin:0;
top:10px;
right:10px;
cursor:pointer;
}
.close {
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="【JSファイル】"></script>
<script type="text/javascript">
$(function(){
new scrCtr('#sample',{
btnClsOpen:'.open',//表示ボタン
btnClsClose:'.close',//閉じるボタン
height:240,//スクロール範囲
val:80,//一回のスクロール量
interval:5000 //スクロール間隔(ミリ秒)
});
});
</script>
</head>
<body>
<div id="sample">
<div>
<ul>
<li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/bbb.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/ccc.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/bbb.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/ccc.jpg" alt="" width="200" height="60"></a></li>
<li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li>
</ul>
<p><a href="">その他</a></p>
</div>
<p class="button"><img src="" class="open" alt="全て表示" width="60" height="60">
<img src="" class="close" alt="閉じる" width="60" height="60"></p>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報