上代码,看效果:
**
html
**
<ul id="container" class="clearfix">
<li>
<div class="img"></div>
<p>
<span>如果有来生,我要做一棵树,站成永恒,没有悲欢的姿势。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<div class="img"></div>
<p>
<span>一半在土里安详,一半在风里飞扬,一半洒落阴凉,一半沐浴阳光。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<div class="img"></div>
<p>
<span>非常沉默非常骄傲,从不依靠从不寻找。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<div class="img"></div>
<p>
<span>如果有来生,有没有人爱,我也要努力做一个可爱的人。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<div class="img"></div>
<p>
<span>不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的路。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<div class="img"></div>
<p>
<span>如果有来生??三毛</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
</ul>
**
css
**
body,div,li,p,ul {
margin:0;
padding:0;
font-size:14px;
font-family:"Microsoft Yahei","微软雅黑",sans-serif;
}
.clearfix::after {
clear:both;
display:block;
height:0;
content:'';
}
li,ul {
list-style:none;
}
#container {
margin:0 auto;
width:100%;
}
#container li {
position:relative;
float:left;
overflow:hidden;
margin:1%;
width:30%;
height:160px;
border:1px solid #ccc;
text-align:center;
line-height:160px;
cursor:pointer;
}
#container li img {
width:100%;
}
#container li p {
position:absolute;
top:-160px;
left:0;
z-index:2;
width:100%;
height:160px;
color:#fff;
}
#container li .img {
display:block;
width:100%;
height:160px;
-webkit-transition:.5s ease-in;
-moz-transition:.5s ease-in;
-o-transition:.5s ease-in;
transition:.5s ease-in;
-ms-transition:.5s ease-in;
}
#container li:nth-child(1) .img {
background-color:#E97305;
}
#container li:nth-child(2) .img {
background-color:#FFAAAA;
}
#container li:nth-child(3) .img {
background-color:#FFFF00;
}
#container li:nth-child(4) .img {
background-color:aqua;
}
#container li:nth-child(5) .img {
background-color:blueviolet;
}
#container li:nth-child(6) .img {
background-color:cadetblue
}
#container li:hover .img {
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
#container li p i {
position:absolute;
top:0;
left:0;
z-index:-1;
display:block;
width:100%;
height:100%;
background:#000;
font-size:16px;
opacity:.7;
-moz-opacity:.7;
filter:alpha(opacity=70);
}
#container li p span {
display:block;
margin:0 auto;
padding-top:60px;
width:94%;
font-size:12px;
line-height:24px;
}
#container li p a {
position:absolute;
top:20px;
left:50%;
display:block;
margin-left:-16px;
width:32px;
height:32px;
background:url(自己放点小图标.png) no-repeat 0 0;
}
.explain {
display:block;
margin:0 auto;
}
**
js(含封装好的函数及注释详情)
**
$("#container li").each(function() {
$(this).on('mouseenter', function(e) { //当鼠标移入元素对象边界内时,激活mouseenter事件。(不会冒泡)
var e = e || window.event;
var angle = direct(e, this)
mouseEvent(angle, this, 'in')
})
$(this).on('mouseleave', function(e) { //当鼠标移出元素对象边界内时,激活mouseleave事件。(不会冒泡)
var e = e || window.event;
var angle = direct(e, this)
mouseEvent(angle, this, 'off')
})
})
function direct(e, o) {
var w = o.offsetWidth;
var h = o.offsetHeight;
var top = o.offsetTop; //包含滚动条滚动的部分
var left = o.offsetLeft;
var scrollTOP = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var offTop = top - scrollTOP;
var offLeft = left - scrollLeft;
//console.log(offTop+";"+offLeft)
//e.pageX|| e.clientX;
//pageX 是从页面0 0 点开始 clientX是当前可视区域0 0开始 即当有滚动条时clientX 小于 pageX
//ie678不识别pageX
//PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
var ex = (e.pageX - scrollLeft) || e.clientX;
var ey = (e.pageY - scrollTOP) || e.clientY;
var x = (ex - offLeft - w / 2) * (w > h ? (h / w) : 1);
var y = (ey - offTop - h / 2) * (h > w ? (w / h) : 1);
var angle = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4 //atan2返回的是弧度 atan2(y,x)
var directName = ["上", "右", "下", "左"];
return directName[angle]; //返回方向 0 1 2 3对应 上 右 下 左
}
function mouseEvent(angle, o, d) { //方向 元素 鼠标进入/离开
var w = o.offsetWidth;
var h = o.offsetHeight;
if (d == 'in') {
switch (angle) {
case '上':
$(o).find("p").css({
left: 0,
top: -h + "px"
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: '50%',
top: -h + "px"
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '右':
$(o).find("p").css({
left: w + "px",
top: 0
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: w + "px",
top: '20px'
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '下':
$(o).find("p").css({
left: 0,
top: h + "px"
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: '50%',
top: h + "px"
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '左':
$(o).find("p").css({
left: -w + "px",
top: 0
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: -w + "px",
top: '20px'
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
}
} else if (d == 'off') {
switch (angle) {
case '上':
$(o).find("p a").stop(true).animate({
left: '50%',
top: -h + "px"
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: 0,
top: -h + "px"
}, 300)
}, 200)
break;
case '右':
$(o).find("p a").stop(true).animate({
left: w + "px",
top: '20px'
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: w + "px",
top: 0
}, 300)
}, 200)
break;
case '下':
$(o).find("p a").stop(true).animate({
left: '50%',
top: h + "px"
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: 0,
top: h + "px"
}, 300)
}, 200)
break;
case '左':
$(o).find("p a").stop(true).animate({
left: -w + "px",
top: '20px'
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: -w + "px",
top: 0
}, 300)
}, 200)
break;
}
}
}
**
效果图
**
还不错吧!!!
**
注:
**
背景色页可换成图片,只需将li下面的div换成img即可,可直接复用div的class样式。li中a标签可添加自己所需的链接地址。