Home > スポンサー広告 > User JavaScriptの練習 - マウスホイールで画像を拡大縮小

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/85-b9422f71
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from 2013-05-01 (水) 02:36

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > User JavaScriptの練習 - マウスホイールで画像を拡大縮小

Home > user javascript > User JavaScriptの練習 - マウスホイールで画像を拡大縮小

User JavaScriptの練習 - マウスホイールで画像を拡大縮小

user javascript

Opera User JavaScriptを分からん人間が練習してます。

マウスホイールイベント

イベント名
mousewheel
イベントプロパティ(どっちでもいいが、プラスマイナスが反対になる)
  • wheelDelta …… 手前:-120 奥:120
  • detail ………… 手前:3 奥:-3

マウスホイールで画像を拡大縮小するスクリプト

画像の上でマウスホイールを奥に回すと拡大、手前に回すと縮小する。


// ==UserScript==
// @include *
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {

    var image = document.getElementsByTagName( 'img');
    for ( var i=0; i<image.length; i++) {
        image[i].addEventListener( 'mousewheel', function(e) {
            // 画像を縮小
            if ( e.wheelDelta == -120) {
                e.currentTarget.width = Math.floor( e.currentTarget.width * 0.9);
                e.currentTarget.height = Math.floor( e.currentTarget.height * 0.9);
            }
            // 画像を拡大
            if ( e.wheelDelta == 120) {
                e.currentTarget.width = Math.floor( e.currentTarget.width * 1.1);
                e.currentTarget.height = Math.floor( e.currentTarget.height * 1.1);
            }
            e.preventDefault();
        }, false);
    }
}, false);

マウスホイールを手前に回すと画像を10%縮小、奥に回すと画像を10%拡大にしている。が、要素の配置によっては思ったように行かない(行かないほうが多い)。

画像を拡大 画像を縮小

(前)画像を拡大したところ。(後)画像を縮小したところ。

参考

Comments:0

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/85-b9422f71
Listed below are links to weblogs that reference
User JavaScriptの練習 - マウスホイールで画像を拡大縮小 from Karafuto Blog
Trackback from 2013-05-01 (水) 02:36

-

管理人の承認後に表示されます (more…)

Home > user javascript > User JavaScriptの練習 - マウスホイールで画像を拡大縮小

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。