サムネイルがスクロール。
【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>