更改鼠标滚轮上的光标单击

时间:2016-11-02 19:12:54

标签: javascript jquery

新的jQuery Custom Scroll

我正在开发一个新的jQuery自定义滚动,因为我遇到的其他滚动版本并没有与最新版本的jQuery保持同步。我现在正好了解基础知识。

我正试图点击鼠标滚轮按钮来触发事件并更改光标,但这证明有一些困难;

$(document).on({
	mousedown: function(e) {
		"use strict";
		e.preventDefault();
		
		if (e.which === 2) {
			$('html,body').css('cursor','all-scroll');
			$(window).data('isDown', true).data('mPosX', e.pageX).data('mPosY', e.pageY);
		}
	},
	mouseup: function(e) {
		"use strict";
		e.preventDefault();
		
		if (e.which === 2) {
			$(window).data('isDown', false);
		}
	},
	mousemove: function(e) {
		"use strict";
		if ($(window).data('isDown')) {
			var CmPosX = e.pageX,
				CmPosY = e.pageY,
				mPosX  = $(window).data('mPosX'),
				mPosY  = $(window).data('mPosY');
			
			console.log('Original X: '    + mPosX +
				', New X: '       + CmPosX +
				' | Original Y: ' + mPosY +
				', New Y: '       + CmPosY
			);
		}
	}  
});

$(document).keydown(function(e){
	"use strict";
	switch(e.keyCode)     {
        case 32:
            console.log("Spacebar pressed");
        break;
		case 33:
            console.log("Page Up pressed");
        break;
		case 34:
            console.log("Page Down pressed");
        break;
        case 37:
            console.log("Left Arrow pressed");
        break;
        case 38:
            console.log("Up Arrow pressed");
        break;
		case 39:
            console.log("Right Arrow pressed");
        break;
		case 40:
            console.log("Down Arrow pressed");
        break;
    }
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

如何在按下时更改光标?

我已尝试通过在我的脚本中实现$('html,body').css('cursor','all-scroll');来点击鼠标滚轮按钮来更改光标,但这只会在您释放鼠标滚轮按钮后发生变化。

如何设置光标滚动?

在谷歌浏览器中,在您可以滚动的页面上,按下时鼠标滚轮会在保持并在每个指南针方向(即北,东北,东......)移动时更改并再次更改。

我知道这个部分需要检查当前位置与原始位置,但是对于这些类型的光标,我找不到它们。

0 个答案:

没有答案