<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: rgba(13, 242, 218, 0.1);
width: 100%;
}
.clearfix:after{display:block; height:0px; content:'.'; visibility:hidden; clear:both;}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul {
width: 480px;
height: 480px;
margin:100px auto;
padding: 10px;
background: #FFFFFF;
}
li {
float: left;
margin: 0 10px 10px 0;
width: 150px;
height: 150px;
position: relative;
border: 1px solid #CCCCCC;
overflow: hidden;
cursor: pointer;
}
li:nth-child(3n) {
margin-right:0;
}
li img {
display: block;
width: 100%;
height: 100%;
margin: auto;
}
li div {
width: 100%;
height:100%;
position: absolute;
left:100%;
top:0;
z-index: 1;
background: rgba(13, 242, 218, 0.9);
text-align: center;
font: 20px/150px simhei;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div id="div"></div>
<ul class="clearfix">
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>以码看人</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>码如其人</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>最怕认真</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>最怕懒惰</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868593476.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>强大自己</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>日有所思</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>日有所得</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>我在装逼</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>你还在看</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('ul li').hover(function(){// 移入效果
var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标
y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标
h=$(this).outerHeight(), //用于获得包括内边界(padding)和边框(border)的元素高度
w=$(this).outerWidth(), ///用于获得包括内边界(padding)和边框(border)的元素宽度
k=Math.floor(h/w);//为了防止不能整除
//为判断鼠标从那个方向移到,移出计算临界值; 将元素块,由对角线划分为,4块区域,上右下左;
//左下到右上的临界值 Y1=高度/宽度*当前鼠标值高度/宽度(计算 tan左下角度) 再通过乘鼠标X得到与之对应的临界值Y1;
//左上到右上的临界值 Y2=高度-(高度/宽度*当前鼠标值 ) 对角线将元素划分为4块,所以左下角和左上角 角度相等,通过左下角,得到Y2比高度少的那一块,再通过高度减去那一块得到第二个临界值;
if((k * x) >= y && (h - k * x) >= y){//上方进入
//初始悬浮块位置,下同
$(this).children("div").css({
"top":"-200px",
"left": 0
})
//设置出现动画,下同
$(this).children("div").stop(true,true).animate({
"top": "0"
});
}
if((k * x) < y && (h - k * x) < y){// 从下方进入
$(this).children("div").css({
"top": "200px",
"left": "0"
})
$(this).children("div").stop(true,true).animate({
"top": "0"
});
}
if((k * x) < y && (h - k * x) > y){
$(this).children("div").css({// 从左边进入
"top": "0",
"left": "-200px"
})
$(this).children("div").stop(true,true).animate({
"left": "0"
});
}
if((k*x)>y && (h-k*x)<y){// 从右边进入
$(this).children("div").css({
"top": "0",
"left": "200px"
})
$(this).children("div").stop(true,true).animate({
"left": "0"
});
}
},function() { // 移出效果
var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标
y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标
h=$(this).outerHeight(),
w=$(this).outerWidth(),
k=Math.floor(h / w);//为了防止不能整除
if((k * x) >= y && (h - k * x) >= y){ //从上方移出
//移出动画,下同
$(this).children("div").stop(true,true).animate({
"top": "-200px"
});
}
if((k * x) < y && (h - k * x) < y){ //从下方移出
$(this).children("div").stop(true,true).animate({
"top": "200px"
});
}
if((k * x ) < y && (h - k * x) > y){ //从左边移出
$(this).children("div").stop(true,true).animate({
"left": "-200px"
});
}
if((k * x) > y && (h - k * x) < y){ //下右边移出
$(this).children("div").stop(true,true).animate({
"left": "200px"
});
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: rgba(13, 242, 218, 0.1);
width: 100%;
}
.clearfix:after{display:block; height:0px; content:'.'; visibility:hidden; clear:both;}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul {
width: 480px;
height: 480px;
margin:100px auto;
padding: 10px;
background: #FFFFFF;
}
li {
float: left;
margin: 0 10px 10px 0;
width: 150px;
height: 150px;
position: relative;
border: 1px solid #CCCCCC;
overflow: hidden;
cursor: pointer;
}
li:nth-child(3n) {
margin-right:0;
}
li img {
display: block;
width: 100%;
height: 100%;
margin: auto;
}
li div {
width: 100%;
height:100%;
position: absolute;
left:100%;
top:0;
z-index: 1;
background: rgba(13, 242, 218, 0.9);
text-align: center;
font: 20px/150px simhei;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div id="div"></div>
<ul class="clearfix">
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>以码看人</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>码如其人</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>最怕认真</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>最怕懒惰</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868593476.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>强大自己</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>日有所思</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>日有所得</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>我在装逼</div>
</li>
<li><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121" />
<div>你还在看</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('ul li').hover(function(){// 移入效果
var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标
y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标
h=$(this).outerHeight(), //用于获得包括内边界(padding)和边框(border)的元素高度
w=$(this).outerWidth(), ///用于获得包括内边界(padding)和边框(border)的元素宽度
k=Math.floor(h/w);//为了防止不能整除
//为判断鼠标从那个方向移到,移出计算临界值; 将元素块,由对角线划分为,4块区域,上右下左;
//左下到右上的临界值 Y1=高度/宽度*当前鼠标值高度/宽度(计算 tan左下角度) 再通过乘鼠标X得到与之对应的临界值Y1;
//左上到右上的临界值 Y2=高度-(高度/宽度*当前鼠标值 ) 对角线将元素划分为4块,所以左下角和左上角 角度相等,通过左下角,得到Y2比高度少的那一块,再通过高度减去那一块得到第二个临界值;
if((k * x) >= y && (h - k * x) >= y){//上方进入
//初始悬浮块位置,下同
$(this).children("div").css({
"top":"-200px",
"left": 0
})
//设置出现动画,下同
$(this).children("div").stop(true,true).animate({
"top": "0"
});
}
if((k * x) < y && (h - k * x) < y){// 从下方进入
$(this).children("div").css({
"top": "200px",
"left": "0"
})
$(this).children("div").stop(true,true).animate({
"top": "0"
});
}
if((k * x) < y && (h - k * x) > y){
$(this).children("div").css({// 从左边进入
"top": "0",
"left": "-200px"
})
$(this).children("div").stop(true,true).animate({
"left": "0"
});
}
if((k*x)>y && (h-k*x)<y){// 从右边进入
$(this).children("div").css({
"top": "0",
"left": "200px"
})
$(this).children("div").stop(true,true).animate({
"left": "0"
});
}
},function() { // 移出效果
var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标
y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标
h=$(this).outerHeight(),
w=$(this).outerWidth(),
k=Math.floor(h / w);//为了防止不能整除
if((k * x) >= y && (h - k * x) >= y){ //从上方移出
//移出动画,下同
$(this).children("div").stop(true,true).animate({
"top": "-200px"
});
}
if((k * x) < y && (h - k * x) < y){ //从下方移出
$(this).children("div").stop(true,true).animate({
"top": "200px"
});
}
if((k * x ) < y && (h - k * x) > y){ //从左边移出
$(this).children("div").stop(true,true).animate({
"left": "-200px"
});
}
if((k * x) > y && (h - k * x) < y){ //下右边移出
$(this).children("div").stop(true,true).animate({
"left": "200px"
});
}
})
</script>
</body>
</html>