<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>first page</title>
</head>
<style>
html,body{
height:100%;
overflow:hidden;
}
#warp,ul{
margin:0;
padding:0;
}
body{
background:#368 no-repeat top/cover;
}
ul{
list-style:none;
}
#wrap{
position:relation;
width:1158px;
height:452px;
margin:50px auto;
// border:1px solid #222;
border-top:1px solid #222;
border-left:1px solid #222;
// border-right:1px solid #222;
// border-bottom:1px solid #222;
}
#wrap ul li{
z-index:999;
position:relative;
float:left;
width:230px;
height:150px;
border-right:1px solid #222;
border-bottom:1px solid #222;
background:url(‘images/client.png‘);
transition:1s;/*css3*/
}
#mb{
position:absolute;
width:230px;
height:150px;
background:rgba(0,0,0,.2);
transition:1s;
}
</style>
<body>
<div id=‘wrap‘>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id=‘mb‘>
</div>
</div>
<script>
var aLi = document.querySelectorAll(‘#wrap ul li‘);/*h5的api*/
var oMb = document.querySelector(‘#mb‘);
var length=aLi.length;
for(var i=0;i<length;i++){
aLi[i].style.backgroundPositionX = i*(-230)+‘px‘;
aLi[i].onmouseenter = function(){
this.style.backgroundPositionY = -150+‘px‘;
var _top = this.offsetTop;
var _left = this.offsetLeft;
//console.log(_top , _left);
oMb.style.top = _top + ‘px‘;
oMb.style.left = _left + ‘px‘;
}
aLi[i].onmouseleave = function(){
this.style.backgroundPositionY = ‘0px‘;
}
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/peicen/p/7653125.html