本文為大家分享了一個簡單的鼠標(biāo)模擬案例，供大家參考，具體實現(xiàn)內(nèi)容如下

如何實現(xiàn)捕抓鼠標(biāo)事件，當(dāng)鼠標(biāo)滑動時，獲取當(dāng)前鼠標(biāo)的坐標(biāo)，接著在一個透明區(qū)域里綁定捕抓的位移，這樣就能在模擬的透明區(qū)域里實現(xiàn)鼠標(biāo)滑動的模型。

效果圖：

HTML代碼：

the mouse

默認(rèn)

圓

0.25

0.5

0.75

1

鼠標(biāo)感應(yīng)器(the mouse sensor)

CSS代碼：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

position: absolute;

text-align: center;

height: 100%;

width: 100%;

}

.main{

position: relative;

margin: 0 auto;

height: 100%;

background-color: rgb(48, 70, 82)

}

.main .content{

position:absolute;

display: inline-block;

top:50%;

left:50%;

margin-left: -300px;

margin-top: -150px;

width: 600px;

height: 300px;

line-height: 300px;

/*overflow: hidden;*/

background: radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);

background: -webkit-radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);

box-shadow: 2px 3px 8px rgba(67, 50, 124 ,.6),0px 0px 8px rgba(67, 50, 124 ,.6);

}

.main .content .content-nav-top{

display: none;

position: absolute;

margin-top: -50px;

height: 50px;

width: 300px;

}

.main .content .content-nav-top >span{

display: block;

float: left;

font-size: 16px;

font-weight: normal;

margin-right:1px;

width: 50px;

height: 50px;

line-height: 50px;

background-color: rgba(251, 214, 146,.3);

box-shadow: 0px 4px 13px rgb(222,222,222,1);

cursor: pointer;

}

.main .content .content-nav-top >span:nth-child(1){

border-radius:0 ;

}

.main .content .content-nav-top >span:nth-child(2){

border-radius:50% ;

}

.main .content .content-nav-top >span:nth-child(3){

border-radius:0;

}

.main .content .content-nav-top >span:nth-child(4){

border-radius: 50% ;

}

.main .content .content-nav-left{

display: none;

position: absolute;

margin-left: -50px;

width: 50px;

height: 300px;

}

.main .content .content-nav-left >span{

display: block;

font-size: 16px;

font-weight: normal;

margin-bottom:1px;

width: 50px;

height: 50px;

line-height: 50px;

background-color: rgb(85, 145, 140);

box-shadow: 0px 4px 13px rgb(222,222,222,1);

border-radius:50% 0 0 50% ;

cursor: pointer;

}

.box{

position: relative;

float: left;

width: 49.9%;

height: 100%;

border-right-style: solid;

border-right-width: 1px;

border-right-color: rgba(211,211,211,.5);

color:rgb(99, 84, 168);

text-shadow: 0px 1px 0px #888,1px 0px 0px #888,0px 0px 1px #888;

}

.block{

float: right;

width: 50%;

height: 100%;

}

JS代碼:

var koringz = (function(){

var x,

y,

getmain,

getcontent,

getbox,

getblock,

getblock_case,

getnav_top,

block_case_margin_top,

block_case_margin_left,

block_casetostring1,

block_casetostring2,

block_casesubstring1,

block_casesubstring2,

istouch;

getmain = document.querySelector('.main');

getcontent = getmain.querySelector('.content');

getbox = getcontent.querySelector('.box');

getblock = getcontent.querySelector('.block');

getblock_case = getblock.querySelector('.block_case');

getnav_top = getcontent.querySelector('.content-nav-top');

getnav_left = getcontent.querySelector('.content-nav-left');

function get_box() {

w_getbox_distance = getbox.offsetWidth;

h_getbox_distance = getbox.offsetHeight;

istouch = 'ontouchstart' in window;

getbox.addEventListener(istouch?'touchmove':'mousemove',mouseevent,false);

getbox.addEventListener(istouch?'touchmove':'mousemove',nav,false)

}

function nav () {

return new_nav();

}

var new_nav = function () {

getnav_top.style.display = 'block';

getnav_left.style.display = 'block';

}

function move_box() {

getblock_case.style.width = '0px';

getblock_case.style.height = '0px';

block_case_margin_left = getblock_case.style.marginLeft = getblock.offsetWidth/2 + 'px';//子節(jié)點

block_case_margin_top = getblock_case.style.marginTop = getblock.offsetHeight/2 + 'px';

block_casetostring1 = block_case_margin_left.toString();//值轉(zhuǎn)化為字符串

block_casetostring2 = block_case_margin_top.toString();

block_casesubstring1 = block_casetostring1.substring(0,3);

block_casesubstring2 = block_casetostring2.substring(0,3);

}

var mouseevent = function () {

mouseEvent(event);

}

function mouseEvent(e){

var zore = 0,

val = 1;

if(istouch){

x = e.touches[zore].pageX;

y = e.touches[zore].pageY;

e.preventDefault();

}

else if(!istouch){

x = w_getbox_distance/2 != undefined ? e.offsetX:e.layerX;

y = h_getbox_distance/2 != undefined ? e.offsetY:e.layerY;

}

if(val = true){

getblock_case.style.width = x + 'px';//獲得了mouse劃過的位置

getblock_case.style.height = y + 'px';

getblock_case.style.marginLeft = (block_casesubstring1-x/2) +'px';

getblock_case.style.marginTop = (block_casesubstring2-y/2) +'px';

getblock_case.style.backgroundColor = "rgba(147, 106, 77,1)";

}

}

(function (){

window.onload = function(){

move_box();

get_box()

}

})()

var click =function () {

this.borderradius = function(num) {

if(typeof num == 'number'){

if(num == 0){

getblock_case.style.borderRadius = num;

}

else if(num > 0){

getblock_case.style.borderRadius = num +'%';

}

else{

return false;

}

}

}

this.opacitas = function (num) {

if(typeof num == 'number'){

getblock_case.style.opacity = num;

}

else{

return false;

}

}

}

var Click = new click();

return {

createclick1 :Click.borderradius,

createclick2 :Click.opacitas

}

})()

這里的鼠標(biāo)箭頭也可換成自己喜歡的圖標(biāo)，模擬鼠標(biāo)區(qū)域的顏色也可自由變換，模擬區(qū)域的效果也可是點狀的，也可以是線狀的，動畫效果等等，這個自由發(fā)揮吧。

以上就是針對JavaScript鼠標(biāo)響應(yīng)事件進行的詳細(xì)介紹，希望對大家的學(xué)習(xí)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的html鼠标响应事件吗,学习JavaScript鼠标响应事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。