<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document change</title>
<style type="text/css">
*{margin:0px;padding:0px}
ul {list-style-type:none}
ul li,ul a,ul span {width:280px;height:180px;border-radius:20px}
ul li{float:left;overflow:hidden;margin:20px 0px 0px 20px;}
ul a{display:block;position:relative}
ul a span{position:absolute;background:url("6.png") no-repeat}
</style>
</head>
<body>
<ul>
<li><a href="http://alisa.uehtml.com/"><img src="1.jpg" alt="" /><span> 0</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 1</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 2</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>
<li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>
<li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>
<li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>
<li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>
<li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>
<li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li>
</ul>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function getpos(ev) {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {
x: ev.clientX + scrollleft,
y: ev.clientY + scrolltop
}
}
(function($,undefined){
$('ul > li').mouseenter(function(e){
var pos = [this.offsetLeft,this.offsetTop,getpos(e).x,getpos(e).y,this.offsetWidth,this.offsetHeight],lock = 0,px = 20,mv = $(this).find('span');
//console.log(this.offsetWidth+"sss"+this.offsetHeight)
if (pos[0] <= pos[2] && pos[0]+px >= pos[2] && !lock) {
mv.css({right:pos[4]+'px',top:'0px',left:'auto',bottom:'auto'});
lock = 1;
mv.stop(true,false).animate({right:'0px'},300);
}
if (pos[0]+pos[4] >= pos[2] && pos[0]+pos[4]-px <= pos[2] && !lock) {
mv.css({left:pos[4]+'px',top:'0px',right:'auto',bottom:'auto'});
lock = 1;
mv.stop(true,false).animate({left:'0px'},300);
}
if (pos[1] <= pos[3] && pos[1]+px >= pos[3] && !lock) {
mv.css({bottom:pos[5]+'px',left:'0px',top:'auto',right:'auto'});
lock = 1;
mv.stop(true,false).animate({bottom:'0px'},300);
}
if (pos[1]+pos[5] >= pos[3] && pos[1]+pos[5]-px <= pos[3] && !lock) {
mv.css({top:pos[5]+'px',left:'0px',bottom:'auto',right:'auto'});
lock = 1;
mv.stop(true,false).animate({top:'0px'},300);
}
return
});
$('ul > li').mouseout(function(e){
var pos = [this.offsetLeft,this.offsetTop,getpos(e).x,getpos(e).y,this.offsetWidth,this.offsetHeight],lock = 0,px = 15,mv = $(this).find('span');
if (pos[0] > pos[2] && !lock) {
mv.css({top:'0px',left:'auto',bottom:'auto'});
lock = 1;
mv.stop(true,false).animate({right:pos[4]+'px'},300);
}
if (pos[0]+pos[4] <= pos[2] && !lock) {
mv.css({top:'0px',right:'auto',bottom:'auto'});
lock = 1;
mv.stop(true,false).animate({left:pos[4]+'px'},300);
}
if (pos[1] > pos[3] && !lock) {
mv.css({left:'0px',top:'auto',right:'auto'});
lock = 1;
mv.stop(true,false).animate({bottom:pos[5]+'px'},300);
}
if (pos[1]+pos[5]-px <= pos[3] && !lock) {
mv.css({left:'0px',bottom:'auto',right:'auto'});
lock = 1;
mv.stop(true,false).animate({top:pos[5]+'px'},300);
}
return
});
})(jQuery);
</script>
</body>
</html>
多些熊伟哥的帮忙 刚开始我的逻辑是通过盒子的四个角坐标进行判断,没有想到通过四个区域进行的。
另外JS只有IE支持mouseenter事件，谷歌和火狐貌似都不支持。因为mouseover会有冒泡发生，写这个效果，会有点抖，我用原生的试过了。最好用jquery来实现这个效果。
时间： 2024-10-06 06:07:40