CSS跟JS版的判断鼠标移入移出位置

CSS版

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>qdabc.cn</title>
  <style>
    body {
      padding: 2em;
      font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
      text-align: center;
    }
    .block {
      position: relative;
      display: inline-block;
      overflow:hidden;
      width: 10em;
      height: 10em;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
    }
    .block_hoverer {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
        opacity: 0;
        transition: all .3s ease;
    }

    .block_hoverer:nth-child(1) {
        background: red;
        top:-90%;

    }

    .block_hoverer:nth-child(2) {
        background: lime;
        top:90%;

    }

    .block_hoverer:nth-child(3) {
        background: orange;
        left:-90%;

    }

    .block_hoverer:nth-child(4) {
        background: blue;
        left:90%;

    }
    .block_hoverer:hover {
        opacity:1;
        top:0;
        left:0;
    }

    .block_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 10em;
      background: #333;
      color: #FFF;
    }
  </style>
</head>
<body>
  <p class="text">从不同方向使鼠标指针移过下面的内容</p>
  <p>↓</p>
  <span>→ </span>
  <div class="block">
    <div class="block_hoverer">1</div>
    <div class="block_hoverer">2</div>
    <div class="block_hoverer">3</div>
    <div class="block_hoverer">4</div>
    <div class="block_content">
      Hover me!
    </div>
  </div>
  <span> ←</span>
  <p>↑</p>
  <script>
    'use strict';
  </script>
</body>
</html>

JS版

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>qdabc.cn</title>
  <style>
    .block {
      margin: 300px 400px;
      width: 300px;
      height: 300px;
      border: 1px solid;
      position: absolute;
      overflow: hidden;
    }
    .move-box {
      width: 300px;
      height: 300px;
      background: #ABD8DE;
      position: absolute;
      left: 0;
      top: 300px;
    }
  </style>
</head>
<body>
  <div class="block">
    <div class="move-box"></div>
  </div>
  <script>
    'use strict';
      var Block = document.querySelector('.block');
      var Boxes = document.querySelector('.move-box');
      function css(obj, attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, null)[attr];
        }
      }
      function act(obj, attr, target, fn){
        obj.timer && clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var cur = parseInt(css(obj, attr));
          var speed = (target - cur) / 8;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          var stop = true;
          if(cur != target){
            stop = false
            obj.style[attr] = cur + speed + 'px';
          }
          if(stop){
            clearInterval(obj.timer);
            obj.timer = null;
            fn && fn();
          }
        }, 10);
      }
      function GetPos (ev, el) {
        var evt = ev || event;
        var x = evt.clientX - (el.offsetLeft + el.offsetWidth/2);
        var y = evt.clientY - (el.offsetTop + el.offsetHeight/2);
        return Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
      }
      Block.addEventListener('mouseenter',function(ev){
        switch (GetPos(ev,Block)) {
          case 0:
            console.log('上');
            Boxes.style.left = 0 + 'px';
            Boxes.style.top = -300 + 'px';
            act(Boxes, 'top', 0);
            break;
          case 1:
            console.log('右');
            Boxes.style.left = 300 + 'px';
            Boxes.style.top = 0 + 'px';
            act(Boxes, 'left', 0);
            break;
          case 2:
            console.log('下');
            Boxes.style.left = 0 + 'px';
            Boxes.style.top = 300 + 'px';
            act(Boxes, 'top', 0);
            break;
          case 3:
            console.log('左');
            Boxes.style.left = -300 + 'px';
            Boxes.style.top = 0 + 'px';
            act(Boxes, 'left', 0);
            break;
        }
      },false);
      Block.addEventListener('mouseleave',function(ev){
        Boxes.style.left = 0 + 'px';
        Boxes.style.top = 0 + 'px';
        switch (GetPos(ev,Block)) {
          case 0:
            console.log('上');
            act(Boxes, 'top', -300);
            break;
          case 1:
            console.log('右');
            act(Boxes, 'left', 300);
            break;
          case 2:
            console.log('下');
            act(Boxes, 'top', 300);
            break;
          case 3:
             console.log('左');
             act(Boxes, 'left', -300);
            break;
        }
      },false);
  </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » CSS跟JS版的判断鼠标移入移出位置

赞 (2)
分享到:更多 ()

发表评论 0