mouse wheel event demo

これは何？

prototype.jsのEventにmousewheel機能を組み込んだ物です。Event.observe(element, 'mousewheel', function);とprototype.js従来のobserverに登録する方法でホイールイベントを扱えるようになります。

prototype.jsを読み込んでからwheel_event.jsを読み込んで下さい。動作確認はprototype.js 1.4.0_rc3 で行いました。その他のバージョンでは動かない可能性があります。またsafariでは一つのelementに対して、一つのホイールイベントしか登録できません。

ダウンロード

http://rails2u.com/misc/wheel_event/wheel_event.js

ライセンスはMITライセンスです。

DEMO

上下ホイールイベントの取得

上下ホイールでのサイズ変更

stopObservingでのホイールイベントの削除

スライダーコントロールとの連携

スライダー、画像共にマウスホイールで画像サイズ変更。safariだとうまく動きません。

source

function wheel(element, wheel_count){
  wheel_count == 1 ? element.innerHTML = 'wheel up' 
                  : element.innerHTML = 'wheel down';
  new Effect.Highlight(element, {endcolor:'#ffffff',restorecolor:'#ffffff'});
}
function wheel2(element, wheel_count){
  element.style.width = element.offsetWidth + wheel_count * 5;
  element.style.height = element.offsetHeight + wheel_count * 5;
  element.innerHTML = element.offsetWidth + ' x ' + element.offsetHeight;
}
function wheel3(element, wheel_count){
  element.innerHTML = 'stop observing!';
  new Effect.Highlight(element, {endcolor:'#ffffff',restorecolor:'#ffffff'});
  Event.stopObserving('wheel_area3','mousewheel',wheel3);
}

Event.observe('wheel_area1','mousewheel',wheel);
Event.observe('wheel_area2','mousewheel',wheel2);
Event.observe('wheel_area3','mousewheel',wheel3);

/* slider */
function setSize(){
  $('size').innerHTML = 'x:' + $('img').width + ', y:' + $('img').height;
}
$('img').def_width = $('img').width;
$('img').def_height = $('img').height;
var slider = new Control.Slider('handle','track' , {axis:'vertical',
    range:$R(0,2),
    onSlide:function(v){
      var img = $('img');
      img.width = img.def_width * v;
      img.height = img.def_height * v;
      setSize();
    }
});
slider.setValue(1);
setSize();

function wheel4(element, wheel_count){
  slider.setValue(slider.value + wheel_count * -0.05);
  slider.options.onSlide(slider.value);
}
Event.observe('track','mousewheel',wheel4);
Event.observe('img','mousewheel',wheel4);