masonly
home > lab. > jqueryThumbnailScroller
jqueryThumbnailScrollerの概要
サムネイルがスクロール。
jqueryThumbnailScrollerの使い方
【1】ココからふむふむと中身を拾う。
【2】<head>〜</head>の間でjquery.min.js を読込、必要なら jquery.easing.1.3.js も読込。
【3】<head>〜</head>の間でcss を書く。#thumbScrollerに高さ設定してoverflow:hiddenするところがキモ。
#outer_container{margin:60px; width:240px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}
#thumbScroller{position:relative; height:600px; overflow:hidden;}
#thumbScroller .container{position:relative; top:0;}
#thumbScroller .content{clear:both;}
#thumbScroller .content div{padding:10px 5px;height:100%;font-family:Verdana, Geneva, sans-serif;font-size:13px;}
#thumbScroller img{border:5px solid #000;}
【4】<body>〜</body>に書くのはこんな感じ。
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="XXX.jpg" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
【5】<body>〜</body>の最後でjavascriptを書く。
<script>
$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
$(window).load(function() {
var sliderHeight=$thumbScroller.height();
var itemHeight=$thumbScroller_content.height();
$thumbScroller_content.each(function (i) {
totalContent=i*itemHeight;
});
$thumbScroller.mousemove(function(e){
var mouseCoords=(e.pageY - this.offsetTop);
var mousePercentY=mouseCoords/sliderHeight;
var destY=-(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
var thePosA=mouseCoords-destY;
var thePosB=destY-mouseCoords;
if(mouseCoords>destY){
$thumbScroller_container.css("top",-thePosA);
}
if(mouseCoords<destY){
$thumbScroller_container.css("top",thePosB);
}
});
var fadeSpeed=250;
$thumbScroller_thumb.each(function () {
var $this=$(this);
$this.fadeTo(fadeSpeed, 0.4);
});
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 0.4);
}
);
});
</script>
jqueryThumbnailScrollerのソース
jqueryThumbnailScrollerのサンプル
