這段代碼move.js 為什么沒辦法使用。哪里出錯了？
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return obj.getComputed(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.timer);
//設置標桿
var flag=true;
//開啟定時器
obj.timer=setInterval(function(){
var icur=0;
//獲取當前值
//遍歷json
for(var attr in json){}
if(attr=='opcity'){
icur=Math.round(parseFloat(getStyle(obj,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]){
return flag=false;
if(attr=='opcity'){
//針對IE瀏覽器
obj.style.filter='alpha(opcity+'+(icur+speed)+')';
//針對firefox/chrom瀏覽器
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}
}else{
return flag=ture;
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶網便民服務JS動畫效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#move{
overflow:hidden;
border:3px solid #A19494;
margin:100px auto;
width:400px;
height:300px;
background-color: hotpink
}
a{
color:green;
font-weight: bold;
font-family: "微軟雅黑";
margin: 20px;
display: inline-block;
padding-top:70px;
height:40px;
width:80px;
text-align: center;
position: relative;
text-decoration: none;
border:2px solid blue;
background-color: white;
}
a:hover{
color: #97F405;
text-decoration:underline;
}
i{
position: absolute;
top:30px;
left:25px;
margin: auto 0px;
filter:alpha(opacity:100);
opacity: 1;
}
#move img{
border:none;
}
</style>
<script src="move.js"></script>
<script >
window.onload=function(){
var oMove=document.getElementById('move');
var List=oMove.getElementsByTagName('a');
for(var i=0;i<List.length;i++){
List[i].onmouseover=function()
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-35,opacity:0},function(){
_this.style.top=35px;
startMove(_this,{top:30px,opacity:1});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i>
<img src="http://img1.sycdn.imooc.com//58ef31870001b76100240024.jpg">
</i><p>華為手機</p></a>
<a href="#"><i>
<img src="http://img1.sycdn.imooc.com//58ef318700019e0900240018.jpg">
</i><p>蘋果手機</p></a>
<a href="#"><i><img src="http://img1.sycdn.imooc.com//58ef318700016c4500240022.jpg"></i><p>小米手機</p></a>
<a href="#"><i>
<img src="http://img1.sycdn.imooc.com//58ef3188000159a200240021.jpg">
</i><p>魅族手機</p></a>
<a href="#"><i>
<img src="http://img1.sycdn.imooc.com//58ef31880001f25500240022.jpg">
</i><p>金立手機</p></a>
<a href="#"><i>
<img src="http://img1.sycdn.imooc.com//58ef31a20001e01800240020.jpg">
</i><p>三星手機</p></a>
</div>
</body>
</html>
2019-06-17
注釋為“檢測停止”那段代碼，把if里的return去掉