<!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{
width:?300px;
margin:?10px?auto;
border:?1px?solid?#ccc;
background-color:?pink;
}
#move?a{
display:?inline-block;
width:?58px;
height:?25px;
border:?1px?solid?#ddd;
border-radius:?3px;
background-color:?#fff;
text-align:?center;
margin:?10px?17px;
position:?relative;
padding-top:?40px;
color:?#9c9c9c;
font-size:?12px;
text-decoration:?none;
line-height:?25px;
overflow:?hidden;
}
#move?a?i{
position:?absolute;
top:?20px;
left:?0;
display:?inline-block;
width:?100%;
text-align:?center;
filter:?alpha(opacity=100);
opacity:?1;
}
#move?a:hover{
color:?#F00;
}
#move?img{
border:?none;
}
</style>
<script?type="text/javascript">
window.onload=function(){
var?M=document.getElementById('move');
var?A=M.getElementsByTagName('a');
for(var?i=0;i<A.length;i++){
A[i].onmouseover=function(){
var?T=this.getElementsByTagName('i')[0];
star(T,{top:-25,opacity:0},function(){
T.style.top=30+'px';
star(T,{top:20,opacity:100});
});
}
}
}
function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];
}
else{
return?getComputedStyle(obj,false)[attr];
}
}
var?alpha=30;
function?star(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var?flag=true;
for(var?attr?in?json)
{
var?s=0;
if(attr=='opacity'){
?s=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
?s=parseInt(getStyle(obj,attr))
}
var?speed=(json[attr]-s)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(s!=json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(s+speed)+')';
obj.style.opacity=(s+speed)/100;
}else{
obj.style[attr]=s+speed+'px';}
if(flag){
clearInterval(obj.timer);}
if(fn){
fn();
}
}
},30)
}
</script>
</head>
<body>
<div?id="move">
<a?href="#"><i><img?src="images/lottery.png"></i><p>彩票</p></a>
<a?href="#"><i><img?src="images/movie.png"></i><p>電影</p></a>
<a?href="#"><i><img?src="images/travel.png"></i><p>旅行</p></a>
<a?href="#"><i><img?src="images/game.png"></i><p>游戲</p></a>
<a?href="#"><i><img?src="images/insurance.png"></i><p>保險</p></a>
<a?href="#"><i><img?src="images/food.png"></i><p>外賣</p></a>
</div>
</body>
</html>
2016-09-11
if(flag){
????????????clearInterval(obj.timer);
????????????if(fn){
????????????????fn();
????????????}
}應(yīng)該是這樣。
2016-09-11
if(flag){
????????????clearInterval(obj.timer);}
????????????if(fn){
????????????????fn();
????????????}
這里有問題。
2016-08-05
到了58行效果還跟老師的一樣,加上59 60折兩行就不一樣了,也不向上消失,只是會晃動一下,求大神解答??!