if(diy<=coordinate.y1&&coordinate.x1<dix<coordinate.x2){
console.log("上面")
}
else if(dix<coordinate.x2&&coordinate.y1<diy<coordinate.y2){
console.log("左边")
}还有很多不完善的地方呢
console.log("上面")
}
else if(dix<coordinate.x2&&coordinate.y1<diy<coordinate.y2){
console.log("左边")
}还有很多不完善的地方呢
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.op ul li{
list-style-type: none;
width: 280px;
height: 180px;
overflow: hidden;
margin:20px 0px 0px 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
position: absolute;
}
.op ul li a{
position: relative;
}
.op ul li a:after{
position: absolute;
background:url("6.png") no-repeat;
width: 280px;
height: 180px;
-webkit-border-radius: 20px;
border-radius: 20px;
content: "";
}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
wrapWidth=wrap.offsetWidth,
oli = wrap.getElementsByTagName("li"),
liWidth = oli[0].offsetWidth,
liHeight = oli[0].offsetHeight,
n = Math.floor(wrapWidth/(liWidth+20)); //一行n個li
for (var i = 0; i < oli.length; i++) {
//position
oli[i].style.left = (i%n)*(liWidth+20) + "px" ; //行
oli[i].style.top = Math.floor(i/n)*(liHeight+20) + "px"; //列
oli.isHover = false;
oli[i].onmouseover = function(e){
var x, y, dx, dy;
x = e.offsetX;
y = e.offsetY;
if(x < liWidth * 0.2){
dx = "左";
}else if(x > liWidth * 0.8){
dx = "右";
}
if(y < liHeight * 0.2){
dy = "上";
}else if(y > liHeight * 0.8){
dy = "下";
}
console.log(dx, dy);
};
}
};
</script>
</head>
<body>
<div class="op" id="wrap">
<ul>
<li>
<a href="javascript:;;">
<div>
<img src="1.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="2.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="3.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="4.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="4.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="3.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="2.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="1.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="2.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:;;">
<div>
<img src="3.jpg" alt="">
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
做了一个演示代码，可以点击查看效果