显示遮罩透明层.

最新推荐文章于 2024-01-08 11:22:35 发布

程序媛之博客

最新推荐文章于 2024-01-08 11:22:35 发布

阅读量347

点赞数

<!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>

程序媛之博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
显示遮罩透明层.

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body{ background: rgba(13, 242, 218, 0.1);
复制链接

扫一扫