你的位置:首页 > Java教程

[Java教程]鼠标响应事件


这是怎么了,打开随笔不知如何下手去写,写好了一行字,又删掉,又写又删。可能是我很久没有来写博客了,算算时间,距离上一次随笔起码有一至二个月了,看来写博客的时间不能间隔太长,否则就失去了写作的能力。切记!切记!

如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型。

以下有一个简单的鼠标模拟案例:

点击链接地址:http://codepen.io/koringz/full/LVwEqa/

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(){ //http://codepen.io/koringz  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  }})()

这里的鼠标箭头也可换成自己喜欢的图标,模拟鼠标区域的颜色也可自由变换,模拟区域的效果也可是点状的,也可以是线状的,动画效果等等,这个自由发挥吧。后续我可能会加上其他的模拟效果。