<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>移动效果</title> <style type="text/css"> *{margin: 0;padding: 0;} #move a{ text-decoration: none; width: 75px; height: 60px; position: absolute; font-size: 11px; padding-top: 10px; color: #7b7b7b; background-color: white; border: 1px solid #ebebeb; text-align: center; } #move{ border: 1px solid #adadad; width: 350px; height: 250px; margin-top: 270px; margin-left: 260px; background-color: #ebebeb; } #move a i{ opacity: 1; position: absolute; top: 10px; left: 30px; } #move a p{ position: absolute; top: 55px; left: 30px; } </style> <script type="text/javascript"> window.onload=function(){ var all_a = document.getElementsByTagName('a'); for(var i = 0 ; i < all_a.length ; i++ ){ all_a[i].style.left = 308 + (i - 3 * (Math.floor(i/3))) * 90 + 'px'; all_a[i].style.top = 320 + 80 * (Math.floor(i/3)) + 'px'; } /*for(var i = 0 ; i < all_a.length ; i++ ){ all_a[i].onmouseover = function(){ var _this = this.getElementsByTagName('i')[0]; clearInterval(timer); timer = setInterval(function(){ if(_this.offsetTop == -30 ){ clearInterval(timer); _this.style.opacity = 0; } else{_this.style.top = _this.offsetTop - 10 +'px';} },30) } }*/ startMove(-10,-30,0); //startMove(10,10,1); var timer = null; function startMove(speed,iTarget,iopacity){ for(var i = 0 ; i < all_a.length ; i++ ){ all_a[i].onmouseover = function(){ var _this = this.getElementsByTagName('i')[0]; clearInterval(timer); timer = setInterval(function(){ if(_this.offsetTop == iTarget ){ clearInterval(timer); _this.style.opacity = iopacity; } else{_this.style.top = _this.offsetTop + speed + 'px';} },30) } } } } /*var timer = null; function startMove(speed,iTarget,iopacity){ for(var i = 0 ; i < all_a.length ; i++ ){ all_a[i].onmouseover = function(){ var _this = this.getElementsByTagName('i')[0]; clearInterval(timer); timer = setInterval(function(){ if(_this.offsetTop == iTarget ){ clearInterval(timer); _this.style.opacity = iopacity; } else{_this.style.top = _this.offsetTop + speed + 'px';} },30) } } }*/ </script> </head> <body> <div id="move"> <a href="#"><i><img src="images/a1.jpg" /></i><p>彩票</p></a> <a href="#"><i><img src="images/a2.jpg" /></i><p>电影</p></a> <a href="#"><i><img src="images/a3.jpg" /></i><p>音乐</p></a> <a href="#"><i><img src="images/a4.jpg" /></i><p>缴费</p></a> <a href="#"><i><img src="images/a5.jpg" /></i><p>理财</p></a> <a href="#"><i><img src="images/a6.jpg" /></i><p>外卖</p></a> </div> </body> </html>
echo_kinchao
李晓健