前にAJAX関連で調べものをしていた時に、WEBブラウザ上でホイールイベントが出来るスクリプトを見つけていたが、その利用価値も分からぬまま放置。
先日、HDのファイル整理をしていたら、テストをしていたhtmlファイルがあったので、備忘録として記載しておきます。
参照元URL：Mouse wheel programming in JavaScript
ソース全文
function upimg(){
var w = 20;
document.getElementById(“teiend”).width = document.getElementById(“teiend”).width + w ;
document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );
document.FormZ.wresult.value = document.getElementById(“teiend”).width;
document.FormZ.hresult.value = document.getElementById(“teiend”).height;
}
function downimg(){
var w = 20;
document.getElementById(“teiend”).width = document.getElementById(“teiend”).width – w ;
document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );
document.FormZ.wresult.value = document.getElementById(“teiend”).width;
document.FormZ.hresult.value = document.getElementById(“teiend”).height;
}
function handle(delta) {
if (delta < 0)
// 下方向にまわした場合の処理
upimg();
else
// 上方向にまわした場合の処理
downimg();
}
/** Event handler for mouse wheel event. */
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;}
/** Initialization code. * If you use your own event management code, change it as required. */
if (window.addEventListener) window.addEventListener(‘DOMMouseScroll’, wheel, false);window.onmousewheel = document.onmousewheel = wheel;
</script>
</head>
<body>
<img src=”1.jpg” id=”teiend” name=”testimg” width=”320px”>
<FORM name=”FormZ”>
幅:<INPUT type=”text” name=”wresult” size=”10″ ID=Text1>
高さ:<INPUT type=”text” name=”hresult” size=”10″ ID=Text2>
<input type=”button” value=”リセット” onClick=”location.reload()”>
</form>
</body>
</html>
上下にホイールを回した時に何が出来るか考えたところ、とりあえず画像の大きさでも変えてみることにしました。
ID属性を変更することで、幅を中心に変えています。
テスト画像は4対3の比率の画像を使っているので、document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );は幅に対して3/4＝0.75をかけているだけです・・・
フォーム部分はあくまでもオマケで、自分の確認用につけているので、画像だけなら不要です。
の数字の部分で増減を調整しています。
出来上がったサンプルはこちら
問題は「０」になってしまうと、どうしようもないということ・・・
何につかえるか分かりませんが、イロイロなAPIをと組み合わせていけたらいいなとおもってますね。
私はホント初心者なので、プログラミングバリバリ出来る人にしてみたら、しょーもないスクリプト組んでいるな！と思われちゃうでしょうが、気にしない！気にしない！