JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年10月 / 09月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>11月

アクセスランキング

[ジャンルランキング]
コンピュータ
231位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
35位
アクセスランキングを見る>>

Java Scriptでのマウスジェスチャー機能の実装

GmailのLabsに「マウス ジェスチャー」というものがあります。

画面上で右クリック+マウス操作をすることでスレッドの移動やページの移動ができるんですが、それと同じ機能をこのブログに実装してみました。

試験的なものなので、バグや環境によって上手く動作しないことなどあるかもしれませんが、そのような場合はコメント欄からブラウザの名前とバージョンを知らせて頂けると幸いです。

使い方は、ブログの画面内で右クリック→151ピクセルほどマウスを右か左に動かしてください。
ページの移動または記事の移動の操作ができます。

コード(無駄な記述が多いので後で直します)

<style type="text/css">
#leftpointer{font-size: xx-large; display: none; z-index: 100; position: absolute;}
#rightpointer{font-size: xx-large; display: none; z-index: 100; position: absolute;}
</style>

<script type="text/javascript">
var isMouseDown = 0;
var viewCM = 0;
var mousePositionX = 0;
var mousePositionY = 0;
var deleteImg = 1;

var borderLineRight = -20;
var borderLineLeft = 20;

var eventBorderLineRight = -180;
var eventBorderLineLeft = 180;

var leftPointerId = "leftpointer";
var rightPointerId = "rightpointer";

document.onmousedown = function(e){
        if (!!e){
                if (e.which == 3){
                        isMouseDown = 1;
                        mousePositionX = e.pageX;
                        mousePositionY = e.pageY;
                        movePointers();
                        return false;
                }
        } else {
                if (event.button == 2){
                        isMouseDown = 1;
                        mousePositionX = event.x + document.body.scrollLeft;
                        mousePositionY = event.y + document.body.scrollTop;
                        movePointers();
                        return false;
                }
        }
}

function movePointers(){        
        document.getElementById(leftPointerId).style.left = mousePositionX + "px";
        document.getElementById(leftPointerId).style.top = mousePositionY + 10 + "px";
        
        document.getElementById(rightPointerId).style.left = mousePositionX + "px";
        document.getElementById(rightPointerId).style.top = mousePositionY + 10 + "px";
}

document.onmousemove = function(e){
        if (isMouseDown == 0){
                return false;
        }
        var nowMousePositionX = 0;
        if (!!e){
                nowMousePositionX = e.pageX;
        } else {
                nowMousePositionX = event.x + document.body.scrollLeft;
        }
        var nowValue = 0;
        if (isMouseDown){
                var theElementL = document.getElementById(leftPointerId);
                var theElementR = document.getElementById(rightPointerId);
                //右方向へのドラッグ
                if (mousePositionX - nowMousePositionX < borderLineRight){
                        if (mousePositionX - nowMousePositionX < eventBorderLineRight){
                                var opacityValue = 100;
                                if (navigator.userAgent.indexOf("MSIE") != -1){
                                        theElementR.style.filter = 'alpha(opacity = ' + 100 + ')';
                                } else if (navigator.userAgent.indexOf("Firefox") != -1){
                                        theElementR.style.MozOpacity = 1;
                                } else {
                                        theElementR.style.opacity = 1;
                                }
                                toDoWhenRight();
                                deleteImg = 0;
                        } else {
                                theElementL.style.display = "none";
                                theElementR.style.display = "block";
                                nowValue = (mousePositionX - nowMousePositionX) * -1;
                                var opacityValue = 100 / (eventBorderLineRight * -1) * nowValue;
                                opacityValue = Math.floor(opacityValue * 100) / 100;
                                if (navigator.userAgent.indexOf("MSIE") != -1){
                                        theElementR.style.filter = 'alpha(opacity = ' + opacityValue + ')';
                                } else if (navigator.userAgent.indexOf("Firefox") != -1){
                                        theElementR.style.MozOpacity = opacityValue / 100;
                                } else {
                                        theElementR.style.opacity = opacityValue / 100;
                                }
                                deleteImg = 1;
                        }
                } else
                //左方向へのドラッグ
                if (mousePositionX - nowMousePositionX > borderLineLeft){
                        if (mousePositionX - nowMousePositionX > eventBorderLineLeft){
                                var opacityValue = 100;
                                if (navigator.userAgent.indexOf("MSIE") != -1){
                                        theElementL.style.filter = 'alpha(opacity = ' + 100 + ')';
                                } else if (navigator.userAgent.indexOf("Firefox") != -1){
                                        theElementL.style.MozOpacity = 1;
                                } else {
                                        theElementL.style.opacity = 1;
                                }
                                toDoWhenLeft();
                                deleteImg = 0;
                        } else {
                                theElementL.style.display = "block";
                                theElementR.style.display = "none";
                                nowValue = mousePositionX - nowMousePositionX;
                                var opacityValue = 100 / (eventBorderLineRight * -1) * nowValue;
                                opacityValue = Math.floor(opacityValue * 100) / 100;
                                if (navigator.userAgent.indexOf("MSIE") != -1){
                                        theElementL.style.filter = 'alpha(opacity = ' + opacityValue + ')';
                                } else if (navigator.userAgent.indexOf("Firefox") != -1){
                                        theElementL.style.MozOpacity = opacityValue / 100;
                                } else {
                                        theElementL.style.opacity = opacityValue / 100;
                                }
                                deleteImg = 1;
                        }
                } else {
                        theElementL.style.display = "none";
                        deleteImg = 1;
                }
        }
}

document.oncontextmenu = function(e){
        if (isMouseDown){
                var nowMousePositionX = 0;
                if (!!e){
                        nowMousePositionX = e.pageX;
                } else {
                        nowMousePositionX = event.x + document.body.scrollLeft
                }
                if ((mousePositionX - nowMousePositionX < borderLineRight) || (mousePositionX - nowMousePositionX > borderLineLeft)){
                        if (isMouseDown){
                                if (deleteImg){
                                        document.getElementById(leftPointerId).style.display = "none";
                                        document.getElementById(rightPointerId).style.display = "none";
                                }
                        }
                }
                isMouseDown = 0;
                if (!viewCM){
                        return false;
                }
        }
        isMouseDown = 0;
}

document.onmouseup = function(e){
        var nowMousePositionX = 0;
        if (!!e){
                nowMousePositionX = e.pageX;
        } else {
                nowMousePositionX = event.x + document.body.scrollLeft
        }
        
        if (((mousePositionX - nowMousePositionX < borderLineRight) || (mousePositionX - nowMousePositionX > borderLineLeft)) == false){
                viewCM = 1;
                return false;
        } else {
                viewCM = 0;
                return false;
        }
        
        isMouseDown = 0;
}

function toDoWhenRight(){
if ("<%nextpage_url>" != ""){
        location.href = "<%nextpage_url>";
} else if ("<%nextentry_url>" != ""){
location.href = "<%nextentry_url>";
} else {
        document.getElementById(leftPointerId).style.display = "none";
        document.getElementById(rightPointerId).style.display = "none";
}
}

function toDoWhenLeft(){
if ("<%prevpage_url>" != ""){
location.href = "<%prevpage_url>";
} else if ("<%preventry_url>" != ""){
location.href = "<%preventry_url>";
} else {
        document.getElementById(leftPointerId).style.display = "none";
        document.getElementById(rightPointerId).style.display = "none";
}
}

</script>


ブラウザによっては右ボタンを離したときに動作が認識されない場合があるみたいなので、後で直したいと思います。


 


 
   About this blog    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

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