<!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>
添加回答
举报
0/150
提交
取消