1.Html代碼<!DOCTYPE html><html>?? ?<head>?? ??? ?<meta charset="UTF-8">?? ??? ?<title>動(dòng)畫(huà)案例</title>?? ??? ?<style>?? ??? ??? ?*{?? ??? ??? ??? ?margin: 0;?? ??? ??? ??? ?padding: 0;?? ??? ??? ??? ?text-decoration: none;?? ??? ??? ?}?? ??? ??? ?#div1{?? ??? ??? ??? ?width: 288px;?? ??? ??? ??? ?height: 200px;?? ??? ??? ??? ?border: 1px solid #eaeaea;?? ??? ??? ??? ?margin: 10px auto;?? ??? ??? ?}?? ??? ??? ?#div1 a{?? ??? ??? ??? ?display: inline-block;?? ??? ??? ??? ?border-radius: 3px;?? ??? ??? ??? ?float: left;?? ??? ??? ??? ?width: 70px;?? ??? ??? ??? ?height: 65px;?? ??? ??? ??? ?border: 1px solid #eaeaea;?? ??? ??? ??? ?position: relative;?? ??? ??? ??? ?overflow: hidden;?? ??? ??? ?}?? ??? ??? ?#div1 a i {?? ??? ??? ?position: absolute;?? ??? ??? ?top: 0px;?? ??? ??? ?left: 0px;?? ??? ??? ?display: inline-block;?? ??? ??? ?width: 100%;?? ??? ??? ?text-align: center;?? ??? ??? ?fliter: alpha(opacity: 100);?? ??? ??? ?opacity: 1;?? ??? ??? ?}?? ??? ??? ?#div1 a p{?? ??? ??? ??? ?width: 70px;?? ??? ??? ??? ?height: 18px;?? ??? ??? ??? ?font-size: 12px;color: #3C3C3C;?? ??? ??? ??? ?text-align: center;?? ??? ??? ??? ?position: absolute;?? ??? ??? ??? ?top: 45px;?? ??? ??? ??? ?left: 0;?? ??? ??? ?}?? ??? ??? ?#div1 a:hover p{?? ??? ??? ??? ?color: red;?? ??? ??? ?}? ??? ??? ??? ?span{?? ??? ??? ??? ?display: inline-block;?? ??? ??? ??? ?margin-top: 11px;?? ??? ??? ??? ?width: 24px;?? ??? ??? ??? ?height: 24px;?? ??? ??? ??? ?background-image: url(../img/便名服務(wù)1.png);?? ??? ??? ??? ?background-repeat: no-repeat;?? ??? ??? ??? ?position: absolute;?? ??? ??? ??? ?top:0;?? ??? ??? ??? ?left: 20px;?? ??? ??? ?}?? ??? ??? ?.icon1{?? ??? ??? ??? ?background-position: 0 0;?? ??? ??? ?}?? ??? ??? ?.icon2{?? ??? ??? ??? ?background-position: 0 -44px;?? ??? ??? ?}?? ??? ??? ?.icon3{?? ??? ??? ??? ?background-position: 0 -85px;?? ??? ??? ?}?? ??? ??? ?.icon4{?? ??? ??? ??? ?background-position: 0 -132px;?? ??? ??? ?}?? ??? ??? ?.icon5{?? ??? ??? ??? ?background-position: 0 -176px;?? ??? ??? ?}???????????????????????????????????????????? ??? ??? ??? ?.icon6{?? ??? ??? ??? ?background-position: 0 -220px;?? ??? ??? ?}?? ??? ??? ?.icon7{?? ??? ??? ??? ?background-position: 0 -264px;?? ??? ??? ?}?? ??? ??? ?.icon8{?? ??? ??? ??? ?background-position: 0 -308px;?? ??? ??? ?}?? ??? ??? ?.icon9{?? ??? ??? ??? ?background-position: 0 -352px;?? ??? ??? ?}?? ??? ??? ?.icon10{?? ??? ??? ??? ?background-position: 0 -396px;?? ??? ??? ?}?? ??? ??? ?.icon11{?? ??? ??? ??? ?background-position: 0 -440px;?? ??? ??? ?}?? ??? ??? ?.icon12{?? ??? ??? ??? ?background-position: 0 -484px;?? ??? ??? ?}?? ??? ?</style>?? ??? ?<script src="同時(shí)運(yùn)動(dòng)動(dòng)畫(huà).js"></script>?? ??? ?<script>?? ??? ??? ?window.onload = function(){?? ??? ??? ??? ?var oDiv =document.getElementById("div1");?? ??? ??? ??? ?var oSpan = document.getElementsByTagName("a");?? ??? ??? ??? ?for(var i=0;i<oSpan.length;i++){?? ??? ??? ??? ??? ?oSpan[i].onmouseover=function(){?? ??? ??? ??? ??? ??? ?var _this = this.getElementsByTagName("i")[0];?? ??? ??? ??? ??? ??? ?startMove(_this,{top:-45,opacity:0},function(){?? ??? ??? ??? ??? ??? ??? ?_this.style.top = 12+"px";?? ??? ??? ??? ??? ??? ??? ?startMove(_this,{top:0,opacity:100});?? ??? ??? ??? ??? ??? ?})?? ??? ??? ??? ??? ?}?? ??? ??? ??? ?}?? ??? ??? ?}?? ??? ?</script>?? ?</head>?? ?<body> ??? ??? ?<div id="div1">?? ??? ??? ?<a href="#"><i><span class="icon1"></span></i><p>充話費(fèi)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon2"></span></i><p>游戲</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon3"></span></i><p>旅行</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon4"></span></i><p>保險(xiǎn)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon5"></span></i><p>彩票</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon6"></span></i><p>電影</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon7"></span></i><p>點(diǎn)外賣(mài)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon8"></span></i><p>理財(cái)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon9"></span></i><p>找服務(wù)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon10"></span></i><p>音樂(lè)</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon11"></span></i><p>水電煤</p></i></a>?? ??? ??? ?<a href="#"><i><span class="icon12"></span></i><p>火車(chē)票</p></i></a>?? ??? ?</div>?? ?</body></html>2.Js代碼function getStyle(obj,attr){?? ??? ?if(obj.currentStyle){?? ??? ??? ?return obj.currentStyle[attr];?? ??? ??? ?}else{?? ??? ??? ?return getComputedStyle(obj,false)[attr];?? ??? ??? ?}?? ??? ??? ?}?? ?//?? ??? ?startMove(obj,{style1:value1,style2:value2},fn)?? ?function startMove(obj,json,fn){ ??? ??? ??? ??? ?var flag = true;?? ??? ??? ?clearInterval(obj.timer);?? ??? ??? ??? ?obj.timer = setInterval(function(){?? ??? ??? ??? ??? ?for(var style1 in json)?? ??? ??? ??? ?{?? ??? ??? ??? ?//1.取當(dāng)前值?? ??? ??? ??? ?var icur = 0;?? ??? ??? ??? ?if(style1 == "opacity"){?? ??? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,style1))*100);?? ??? ??? ??? ?}else{?? ??? ??? ??? ??? ?icur =Math.round(parseInt(getStyle(obj,style1)));?? ??? ??? ??? ?}?? ??? ??? ??? ?//2.算速度?? ??? ??? ??? ?var speed =(json[style1]-icur)/8;?? ??? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);?? ??? ??? ??? ?//3.檢測(cè)停止?? ??? ??? ??? ??? ?if(icur != json[style1]){?? ??? ??? ??? ??? ??? ?flag = false;?? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ??? ?if(style1 =="opacity"){?? ??? ??? ??? ??? ??? ?obj.style.filter ="alpha(opacity:"+(icur+speed)+")";?? ??? ??? ??? ??? ??? ?obj.style.opacity = (icur+speed)/100;?? ??? ??? ??? ??? ??? ?}else{?? ??? ??? ??? ??? ??? ?obj.style[style1] = icur+speed+"px";?? ??? ??? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ?if(flag){?? ??? ??? ??? ??? ??? ?clearInterval(obj.timer);?? ??? ??? ??? ??? ??? ?if(fn){?? ??? ??? ??? ??? ??? ??? ?fn();?? ??? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ?}?? ??? ??? ??? ?},30)?? ??? ??? ?}? 3.icon圖片4.碼好之后的布局5.鼠標(biāo)移入之后的混亂現(xiàn)象
我的鼠標(biāo)移入后圖標(biāo)會(huì)消失沒(méi)問(wèn)題，但移出后圖標(biāo)不回來(lái)，不清楚什么原因，求大神解答。。。
向死而生3491500
2016-09-20 22:48:21