鼠标响应事件

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

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

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

点击链接地址：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
    }
})()

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

posted @ 2015-09-13 10:13 微宇宙阅读(1098) 评论(0) 编辑收藏举报

刷新页面返回顶部

微宇宙

人生如阶梯,每一个阶梯都代表一个层级.

鼠标响应事件

公告