哪里出錯了
<!DOCTYPE html>
<html>
<head>
?<title></title>
?<style type="text/css">
??* {
???margin: 0;
???padding: 0;
??}
??#move {
???width: 200px;
???height: 240px;
???margin: 10px auto;
???border: 1px solid #ccc;
??}
??#move a {
???display: inline-block;
???width: 58px;
???height: 55px;
???border: 1px solid #ddd;
???border-radius: 3px;
???background-color: #fff;
???text-align: center;
???margin: 10px 17px;
???position: relative;
???color: #9c9c9c;
???font-size: 12px;
???text-decoration: none;
???line-height: 25px;
???overflow: hidden;
???opacity: 1;
???filter: Alpha(opacity=100);
??}
??#move a i {
???position: absolute;
???top: 20px;
???left: 0;
???display: inline-block;
???width: 100%;
???text-align: center;
??}
??#move img {
???padding: 3px 0;
???border: none;
???z-index:-1
??}
??#move a:hover {
???color: #f00;
??}
?</style>
?<script type="text/javascript" >
??window.onload=function(){
???var oDiv=document.getElementById('move'),
????oA=oDiv.getElementsByTagName('a');
??for(var i=0;i<oA.length;i++){
???oA[i].onmouseover=function(){
????var othis=this.getElementsByTagName('i');
????Move(othis,{top:-20,opacity:30})
???}
??}
??
?}
?
?function Move(obj,json,fn){
??clearInterval(obj.timer);
??obj.timer=setInterval(function(){
???var flag=0;
???for(var attr in json){
????var iCur=0;
????if(attr == 'opacity'){
?????iCur=Math.round(parseFloat(getStyle(opbj,attr))*100);
????}
????else{
?????iCur=parseInt(getStyle(obj,attr));
????}
????var speed=(json[attr]-iCur)/8;
????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????if(iCur != json[attr]){
?????flag=false;
????}
????if(attr == 'opacity'){
?????obj.style.filter="alpha(opacity:'iCur+speed')";
?????obj.style.opacity=(iCur+speed)/100;
????}
????else{
?????obj.style[attr]=iCur+speed+'px';
????}
????if(flag){
?????clearInterval(obj.timer);
?????if(fn){
??????fn();
?????}
????}
???}
??},30);
?}
?function getStyle(obj,attr){
??if(obj.currentStyle){
???return obj.currentStyle[attr];
??}
??else{
???
??}
?}
?</script>
??
</head>
<body>
?<div id="move">
??<a href="#">
???<i><img src="images/food.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>保險(xiǎn)</p>
??</a>
??<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>??
?</div>
</body>
</html>
2016-10-11
不知道你運(yùn)行代碼的時候發(fā)現(xiàn)沒有，你的文字在圖片上方。之所以有這個問題，是因?yàn)槟銢]有給<a>設(shè)置padding。而<i>它是相對<a>絕對定位的，它的top=20px，對后面的<p>不再產(chǎn)生影響，因此,p就跑到了top=20px的那20px的高度之中啦。
錯誤1：你聲明變量flag的時候聲明錯誤，應(yīng)該是
????3.Move函數(shù)里面有一處書寫錯誤，obj寫成了opbj，更正后：
if(attr?==?'opacity'){ ?????iCur=Math.round(parseFloat(getStyle(obj,attr))*100); ????}????4.獲取樣式函數(shù)getStyle()的else{}里面根本沒有任何內(nèi)容啊，也就是說在chrome，Safari等瀏覽器里面這個函數(shù)根本沒有起到獲取樣式的作用啊。可以這樣改：
function?getStyle(obj,attr){ ??if(obj.currentStyle){ ???return?obj.currentStyle[attr]; ??} ??else{ ???return?getComputedStyle(obj,false)[attr]; ??} ?}