滑鼠懸浮實現翻牌效果程式碼例項

螞蟻小編發表於2017-04-14

本章節分享一段程式碼例項，它實現了滑鼠懸浮翻牌效果。

此效果比較常見於廣告，感興趣的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}
.wrap {
  height: auto;
  width: 65%;
  margin: 100px auto;
}
.face {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
  float: left;
  margin: 2px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.face .box {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transform: rotate3d(0, 0, 0,0);
  -moz-transform: rotate3d(0, 0, 0,0);
  -webkit-transform: rotate3d(0, 0, 0,0);
  -ms-transform: rotate3d(0, 0, 0,0);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face .box-mask {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,0,0,1);
  font-family: "微軟雅黑";
  z-index: 999;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transform: rotate3d(0,1,0,-180deg);
  -moz-transform: rotate3d(0,1,0,-180deg);
  -ms-transform: rotate3d(0,1,0,-180deg);
  -webkit-transform: rotate3d(0,1,0,-180deg);
}
.face .box-mask p {
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
  font-size: 30px;
  line-height: 200px;
}
.face .mask {
  height: 100%;
  width: 100%;
  position: absolute;
  background: rgba(0,0,0,0.5);
  font-size: 30px;
  font-family: "微軟雅黑";
  text-align: center;
  line-height: 200px;
  color: white;
}
.face img {
  height: 100%;
  width: 100%;
}
.face:hover .box {
  transform: rotate3d(0,1,0,-180deg);
  -moz-transform: rotate3d(0,1,0,-180deg);
  -ms-transform: rotate3d(0,1,0,-180deg);
  -webkit-transform: rotate3d(0,1,0,-180deg);
  z-index: 999;
}
.face:hover .box-mask {
  transform: rotate3d(0, 0,0,0);
  -moz-transform: rotate3d(0, 0, 0,0);
  -webkit-transform: rotate3d(0, 0, 0,0);
  -ms-transform: rotate3d(0, 0, 0,0);
  z-index: 9999;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
  $('.mask').css({
    "left": "0",
    "top": "100%"
  });
  $('.face').on('mouseenter', function(event) {
    var index = $(this).index();
    var event = event || window.event,
      seenterX = event.clientX,
      seenterY = event.clientY;
    $(this).on('mouseleave', function(event) {
      var event = event || window.event,
        leaveX = event.clientX,
        leaveY = event.clientY,
        checkX = leaveX - seenterX,
        checkY = leaveY - seenterY;
      checkSeenter(checkX, checkY, index);
    })
  })
 
  function checkSeenter(checkX, checkY, index) {
    console.log(index)
    if (checkX > 0 && Math.abs(checkX) > Math.abs(checkY)) {
      console.log('左邊')
      $('.face').eq(index).find($('.mask')).css({
        "left": "-100%",
        "top": "0"
      }).stop().animate({
        "left": "100%",
        "top": "0%"
      });
    } else if (checkX < 0 && Math.abs(checkX) > Math.abs(checkY)) {
      console.log('右邊');
      $('.face').eq(index).find($('.mask')).css({
        "left": "100%",
        "top": "0"
      }).stop().animate({
        "left": "-100%",
        "top": "0%"
      });
    } else if (checkY > 0 && Math.abs(checkX) <= Math.abs(checkY)) {
      console.log('上邊')
      $('.face').eq(index).find($('.mask')).css({
        "left": "0",
        "top": "-100%"
      }).stop().animate({
        "top": "100%",
        "left": "0"
      });
 
    } else {
      console.log('下邊');
      $('.face').eq(index).find($('.mask')).css({
        "left": "0",
        "top": "100%"
      }).stop().animate({
        "top": "-100%",
        "left": "0"
      });
    }
  }
})
</script>
</head>
<body>
<div class="wrap">
  <div class="face">
    <div class="box">
      <div class="mask">正面背景</div>
      <img src='demo/jQuery/img/41.jpg'>
    </div>
    <div class='box-mask'>
      <p>背面背景</p>
    </div>
  </div>
  <div class="face">
    <div class="box">
      <div class="mask">正面背景</div>
      <img src='demo/jQuery/img/40.jpg'>
    </div>
    <div class='box-mask'>
      <p>背面背景</p>
    </div>
  </div>
  <div class="face">
    <div class="box">
      <div class="mask">正面背景</div>
      <img src='demo/jQuery/img/39.jpg'>
    </div>
    <div class='box-mask'>
      <p>背面背景</p>
    </div>
  </div>
  <div class="face">
    <div class="box">
      <div class="mask">正面背景</div>
      <img src='demo/jQuery/img/38.jpg'>
    </div>
    <div class='box-mask'>
      <p>背面背景</p>
    </div>
  </div>
</div>
</body>
</html>

相關文章