鼠标悬浮实现翻牌效果代码实例
分类：实例代码
本章节分享一段代码实例，它实现了鼠标悬浮翻牌效果。
此效果比较常见于广告，感兴趣的朋友可以做一下参考，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
鼠标悬浮实现翻牌效果代码实例，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮实现翻牌效果代码实例就介绍到这了。
鼠标悬浮实现翻牌效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。