私は現在ウェブサイトを構築しており、デザインではこの例の形でスクロールホイールを示しています。
スクロール可能なプラグインや他の同様のプラグインなどを使用してこれを作成するのに問題はありませんが、フラッシュの例のように画像をクリックしてドラッグし、「フリック」することはできません。
これを可能にするプラグインを知っていますか、またはScrollableのようなものを変更してこれを行う方法を知っていますか?
私はJQueryを初めて使用するので、これが少し簡単な質問である場合は申し訳ありません。
私は現在ウェブサイトを構築しており、デザインではこの例の形でスクロールホイールを示しています。
スクロール可能なプラグインや他の同様のプラグインなどを使用してこれを作成するのに問題はありませんが、フラッシュの例のように画像をクリックしてドラッグし、「フリック」することはできません。
これを可能にするプラグインを知っていますか、またはScrollableのようなものを変更してこれを行う方法を知っていますか?
私はJQueryを初めて使用するので、これが少し簡単な質問である場合は申し訳ありません。
http://jsfiddle.net/UmZeZ/2/には実行中のサンプルがあります。
読みやすさのために途中でリファクタリングされたバージョンを取り除いた:
<div id="lolcats" style="background:url(image.jpg) 0 0 repeat-y;"></div>
<script>
$(function(){
var startLoc = 0;
var currentLoc = 0;
$('#lolcats').mousedown(function(e){
startLoc = e.pageY;
$(this).bind('mousemove', function(e){
startLoc = startLoc - event.pageY;
location = $(this).css("background-position-y");
currentLoc = parseInt(location.replace("px", "")) - startLoc;
$(this).css("background-position-y", currentLoc + "px");
startLoc = currentLoc;
});
});
$('body').mouseup(function(e){
$('#lolcats').unbind('mousemove');
});
});
</script>
楽しみ :)
ここでは、jquery 用の多くのプラグインを見つけることができます。 http://www.jqueryplugins.com/