学习JavaScript鼠标响应事件

前端技术 2023/09/07 JavaScript

本文为大家分享了一个简单的鼠标模拟案例，供大家参考，具体实现内容如下
如何实现捕抓鼠标事件，当鼠标滑动时，获取当前鼠标的坐标，接着在一个透明区域里绑定捕抓的位移，这样就能在模拟的透明区域里实现鼠标滑动的模型。

效果图：

HTML代码：

<!DOCTYPE html>
<html >
 <head>
 <meta charset=\"UTF-8\">
 <title> the mouse </title>
 <link rel=\"stylesheet\" href=\"css/new.css\">
 </head>
 <body>
 <div class=\"main\">
 <div class=\"content\">
 <div class=\"content-nav-top\">
  <span onclick = \'koringz.createclick1(0)\'>默认</span>
  <span onclick = \'koringz.createclick1(50)\'>圆</span>
 </div>
 <div class=\"content-nav-left\">
  <span onclick = \'koringz.createclick2 (0.25) \'>0.25</span>
  <span onclick = \'koringz.createclick2 (0.5) \'>0.5</span>
  <span onclick = \'koringz.createclick2 (0.75)\'>0.75</span>
  <span onclick = \'koringz.createclick2 (1) \'>1</span>
 </div>
 <div class=\"box\">鼠标感应器(the mouse sensor)</div>
 <div class=\"block\">
  <div class=\'block_case\'></div>
 </div>
 </div>
 </div>
 <script type=\"text/javascript\" src=\"js/demo.min/demo.min.js\"></script>
 </body>
</html>

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\';//子节点
 block_case_margin_top = getblock_case.style.marginTop = getblock.offsetHeight/2 + \'px\';
 block_casetostring1 = block_case_margin_left.toString();//值转化为字符串
 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
 }
})()

这里的鼠标箭头也可换成自己喜欢的图标，模拟鼠标区域的颜色也可自由变换，模拟区域的效果也可是点状的，也可以是线状的，动画效果等等，这个自由发挥吧。
以上就是针对JavaScript鼠标响应事件进行的详细介绍，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/17725

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案