                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

我要瘋了！?。∏蟠笊癜。。?！為什么鼠標(biāo)移到上面只觸發(fā)第一個(gè)startMove在移上面一次才出發(fā)那里面的第二個(gè)startMove

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
function getStyle(obj, attr) {
?? ?if(obj.currenStyle){
?? ??? ?return obj.currentStyle[attr];?? ?
?? ?}
?? ?else {
?? ??? ?return getComputedStyle(obj,false)[attr];?? ?
?? ?}
}
function startMove(obj,json,fn){
?? ?var flag = true;
?? ?clearInterval(obj.timer);
?? ?obj.timer = setInterval(function() {
?? ??? ?for(var attr in json)
?? ??? ?{
?? ??? ??? ?//1.取當(dāng)前值
?? ??? ??? ?var icur = 0;
?? ??? ??? ?if(attr=='opacity'){
?? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,attr))*100);//當(dāng)前透明度
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?icur = parseInt(getStyle(obj,attr));
?? ??? ??? ?}
?? ??? ??? ?//2.算速度
?? ??? ??? ?obj.speed = (json[attr]-icur)/8;
?? ??? ??? ?obj.speed = obj.speed>0?Math.ceil(obj.speed):Math.floor(obj.speed);
?? ??? ??? ?//3.檢測停止
?? ??? ??? ?if(json[attr]!=icur) {
?? ??? ??? ??? ?flag = false;
?? ??? ??? ?}
?? ??? ??? ?if(attr=='opacity'){
?? ??? ??? ??? ?obj.style[attr] = (icur+obj.speed)/100;
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?obj.style[attr] = icur + obj.speed + 'px';?? ?
?? ??? ??? ?}?? ?
?? ??? ?}
?? ??? ?if(flag){
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ?if(fn){
?? ??? ??? ??? ?fn();
?? ??? ??? ?}
?? ??? ?}
?? ?},30);
}
window.onload=function(){
?? ?var move = document.getElementById('move');
?? ?var a = move.getElementsByTagName('a');
?? ?for(var i = 0;i<a.length;i++){
?? ??? ?a[i].onmouseover = function(){
?? ??? ??? ?var a_this = this.getElementsByTagName('img')[0];
?? ??? ??? ?startMove(a_this,{top:-10,opacity:0},function(){
?? ??? ??? ???? a_this.style[top] = 20 +'px';
?? ??? ??? ??? ?startMove(a_this,{top:10,opacity:100});?? ?
?? ??? ??? ?});
?? ??? ?}
?? ?}
}

</script>
<style type="text/css">
*{
?? ?margin: 0;
?? ?padding: 0;
?? ?text-decoration: none;
?? ?font-size:13px;
?? ?text-decoration:none;
}
#move{
?? ?margin:50px auto;
?? ?width:245px;
?? ?height:245px;
?? ?background-color:#eee;
}
#move a{
?? ?display:block;
?? ?width:55px;
?? ?height:75px;
?? ?position:relative;
?? ?margin-left:5px;
?? ?margin-top:5px;
?? ?border-radius:3px;
?? ?color:#000;
?? ?float:left;
?? ?background-color:#fff;
?? ?overflow:hidden;
}
#move a:hover{
?? ?color:#C60;
}
#move a img{
?? ?position:absolute;
?? ?top:10px;
?? ?left:12px;
?? ?display:block;
?? ?text-align:center;
?? ?opacity:1;
?? ?border:none;
}
#move a p {
?? ?display:block;
?? ?position:absolute;
?? ?top:50px;
?? ?left:12px;
?? ?margin-left:2px;
?? ?text-align:center;
}

</style>

</head>
<body>
?? ?<div id="move">
?? ??? ?<a href="#"><img? src="image/1.jpg" /><p>保險(xiǎn)</p></a>
??????? <a href="#"><img? src="image/2.jpg" /><p>旅行</p></a>
??????? <a href="#"><img? src="image/3.jpg" /><p>游戲</p></a>
??????? <a href="#"><img? src="image/4.jpg" /><p>彩票</p></a>
??????? <a href="#"><img? src="image/5.jpg" /><p>電影</p></a>
??????? <a href="#"><img? src="image/6.jpg" /><p>點(diǎn)外賣</p></a>
??????? <a href="#"><img? src="image/7.jpg" /><p>理財(cái)</p></a>
??????? <a href="#"><img? src="image/8.jpg" /><p>找服務(wù)</p></a>
??????? <a href="#"><img? src="image/9.jpg" /><p>音樂</p></a>
??????? <a href="#"><img? src="image/10.jpg" /><p>水煤電</p></a>
??????? <a href="#"><img? src="image/11.jpg" /><p>火車票</p></a>
??????? <a href="#"><img? src="image/12.jpg" /><p>更多</p></a>
??? </div>
</body>
</html>