Learn JavaScript mouse response Event _javascript tips

This article for everyone to share a simple mouse simulation case for your reference, the specific implementation of the following content
How to achieve the catch mouse event, when the mouse is sliding, get the current mouse coordinates, and then in a transparent area to bind the catch displacement, so that in the simulation of transparent areas to implement the mouse sliding model.

Effect Chart:

HTML code:

<! DOCTYPE html>  

CSS code:

* {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 (content{)}. Main. 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 (0, 176, 198), #888 100%);
 Background:-webkit-radial-gradient (Ellipse farthest-corner, RGB (0, 176, 198), #888 100%);
box-shadow:2px 3px 8px Rgba (+, 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; 
Content-nav-top >span:nth-child (1) {border-radius:0; 
Content-nav-top >span:nth-child (2) {border-radius:50%; 
Content-nav-top >span:nth-child (3) {border-radius:0; 
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 Code:

var Koringz = (function () {var x, y, Getmain, getcontent, Getbox, Getblock, Getblock_case, Getnav_top, Block_ca Se_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 ';//child node Block_case_margin_top =
 Getblock_case.style.marginTop = getblock.offsetheight/2 + ' px '; Block_casetostring1 = Block_case_margin_left.tostring ();//value converted to string 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 across the position 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}}) ()

The mouse arrows here can also be replaced by their favorite icon, the simulation of the color of the mouse area can also be free to transform, simulation of the effect of the region is also a point-like, can also be linear, animation effect, etc., this free play it.
The above is for JavaScript mouse response to the detailed description of the event, I hope to help you learn.