沒懂哪里不對。。。http://idcbgp.cn/video/3173
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title></title>
<style?type="text/css">
*?{
margin:?0;
padding:?0;
}
#move?{
width:?300px;
height:?170px;
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>
window.onload=function(){
var?as=document.getElementById("move").getElementsByTagName("a");
for(var?i=0;i<as.length;i++){
as[i].onmouseover=function(){
var?ai=this.getElementsByTagName('i')[0];
lis_over(ai,{top:-25,opacity:0},function(){
ai.style.top=30+'px';
lis_over(ai,{top:20,opacity:1})
});
}
}
}
</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>京東</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>function?lis_over(obj,?json,?fn)?{
obj.timer?=?null;
clearInterval(obj.timer);
obj.timer?=?setInterval(function()?{
var?flag?=?true;
for?(var?sty?in?json)?{
//樣式值處理
var?wd?=?window.getComputedStyle(obj,?null)[sty];
if?(sty?==?'opacity')?{
wd?=?Math.round(parseFloat(wd)?*?100)?/?100;
}?else?{
wd?=?parseInt(wd);
}
var?speed?=(json[sty]?-?wd)?/?6;
speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
//console.log('sty:'+sty+';wd:'+wd+';sty:'+json[sty]);
if(wd!=json[sty]){
flag=false;
}
//透明度
if?(sty?==?'opacity')?{
var?a?=?wd?*?100?+?speed;
obj.style[sty]?=?a?/?100;
}?else?{
//其他
obj.style[sty]?=?wd?+?speed?+?"px";
}
if?(flag)?{
clearInterval(obj.timer);
if?(fn)?{
fn();
}
}
}
},?50)
}啥子情況？感謝啊。。。
2016-07-08
嘿嘿，最近有點(diǎn)忙，來晚了。這個(gè)問題我也沒注意，最終發(fā)現(xiàn)，是obj.timer?=?null;clearInterval(obj.timer);這里兩句出了問題，當(dāng)obj.timer=null;時(shí)，后者 相當(dāng)于clearInterval(null)。有沒有發(fā)現(xiàn)問題呢？對，就是這樣導(dǎo)致后者并沒有將原有定時(shí)器結(jié)束，而obj.timer=null，本身只是將obj.timer 指向了一個(gè)空值，親測它沒有結(jié)束定時(shí)器的能力。也就是說當(dāng)前一個(gè)定時(shí)器沒有結(jié)束的時(shí)候，再次觸發(fā)事件，仍然會(huì)導(dǎo)致定時(shí)器的疊加。解決辦法就是將obj.timer=null;這一句去掉就可以了。
總結(jié)而言其實(shí)就是clearInterval(timer)和timer = null的區(qū)別：
clearInterval(timer)用來終止正在進(jìn)行中的計(jì)時(shí)器，timer=null把句柄timer指向一個(gè)空值，前一種是可以復(fù)用，而后者一般情況下僅在最初聲明timer時(shí)使用。
好了，我了解的也就這么多了
2016-07-06
2016-07-06
你寫的實(shí)在太亂，我這里總結(jié)好了，你直接拿去
//獲取元素當(dāng)前樣式 function?getStyle(obj,attr){ ????if?(obj.currentStyle)?{ ????????return?obj.currentStyle[attr];?????????????????????????//IE瀏覽器 ????}else{ ????????return?getComputedStyle(obj,false)[attr];????????????//火狐瀏覽器 ????} } //完美運(yùn)動(dòng)框架（支持鏈?zhǔn)竭\(yùn)動(dòng)，也支持同時(shí)運(yùn)動(dòng)特效） /* //json格式 var?json?=?{name1:'1111',name2:'2222'}; //遍歷獲取每條數(shù)據(jù) for(var?i?in?json){ ????i?????????????=???name值 ????json[i]??????=????key值 } */ function?startMove(obj,json,fn){ ????//假設(shè)所有運(yùn)動(dòng)都到達(dá)目標(biāo)值 ????var?torger?=?null; ????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); ????????????}else{ ????????????????icur?=?parseInt(getStyle(obj,attr)); ????????????} ????????????//2.算速度(緩沖運(yùn)動(dòng)，運(yùn)動(dòng)的正負(fù)) ????????????var?speed?=?(json[attr]-icur)/8; ????????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ???????????? ????????????//3.檢測停止 ????????????//如果所有的運(yùn)動(dòng)都沒有到達(dá)終點(diǎn),torger為false ????????????if?(icur?!=?json[attr])?{ ????????????????torger?=?false; ???????????????? ????????????}else{ ????????????????torger?=?true; ????????????} ????????????//如果所有的運(yùn)動(dòng)都沒有到達(dá)終點(diǎn)，繼續(xù)運(yùn)行程序 ????????????if?(attr?==?'opacity')?{ ????????????????obj.style.filter?=?'alpha:(opacity:'+icur+speed+')'; ????????????????obj.style.opacity?=?(icur+speed)/100; ????????????}else{ ????????????????obj.style[attr]?=?icur?+?speed?+'px'; ????????????} ???????????? ????????} ????????if?(torger)?{ ????????????clearInterval(obj.timer); ????????????if?(fn)?{ ????????????????fn(); ????????????} ????????} ????},30); ???? }