结构
<div class="box"> <ul> <li><a href="#"><i></i><span>手机</span></a></li> <li><a href="#"><i></i><span>飞机</span></a></li> <li><a href="#"><i></i><span>电影</span></a></li> <li><a href="#"><i></i><span>游戏</span></a></li> <li><a href="#"><i></i><span>彩票</span></a></li> <li><a href="#"><i></i><span>加油站</span></a></li> <li><a href="#"><i></i><span>医院</span></a></li> <li><a href="#"><i></i><span>火车站</span></a></li> </ul></div>
样式
.box { width: 300px;}ul { list-style-type: none; overflow: hidden; margin: 0; padding: 0; }.box li { position: relative; float: left; width: 90px; line-height: 100px; padding: 5px; text-align: center;}.box li a { text-decoration: none;}.box li i { position: absolute; top: 20px; left: 37px; width: 26px; height: 26px; background: url(http://img12.360buyimg.com/uba/jfs/t2860/228/2348548716/20317/f0a9fa2b/57620a6fN77b2b8af.png) no-repeat 0 0;}
行为
window.onload = function () { var aBox = document.getElementsByClassName("box"); var aI = aBox[0].getElementsByTagName("i"); for(var i= 0,l=aI.length; i<l; i++) { aI[i].style.backgroundPosition = "0 "+i*(-25)+"px"; }}
时间: 2024-10-07 02:08:32