請看一下我的代碼，鼠標只有滑過文字再撤回才能實現效果，滑過別的區域就不行？xiexie
<<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>0914-4小圖標旋轉</title>
<style type="text/css">
#move{
margin: 10px auto;
padding: 0;
border:1px solid #ccc;
}
#move a{
display: inline-block;
width: 58px;
height: 30px;
border:1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 40px;
color: #000;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i{
position: absolute;
top: 20px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
filter: alpha(opacity:100);
opacity: 1;
}
#move a:hover{
color: #f00;
}
#move img{
border:none;
}
</style>
<script src="js/0914-4.js"></script>
<script>
window.onload=function(){
var oMove=document.getElementById("move");
var aList=oMove.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-25,opacity:0},function(){
_this.style.top=30+"px";
startMove(_this,{top:20,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="images/caipiao.jpg"></i><p>彩票</p></a>
<a href="#"><i><img src="images/dianying.jpg"></i><p>電影</p></a>
<a href="#"><i><img src="images/yinyue.jpg"></i><p>音樂</p></a>
<a href="#"><i><img src="images/jiaofei.jpg"></i><p>繳費</p></a>
<a href="#"><i><img src="images/licai.jpg"></i><p>理財</p></a>
<a href="#"><i><img src="images/waimai.jpg"></i><p>外賣</p></a>
</div>
</body>
</html>
function getStyle(obj,attr){
//IE
if(obj.currentStyle){
return obj.currentStyle[attr];
}
//火狐 chrome
else{
return getComputedStyle(obj,false)[attr];
}
}
//var json={attr1:target1,attr2:target2}
//startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
var flag=true;//默認都到達目標
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
//1.取當前值
var icur=0;
//如果屬性為透明度，四舍五入(透明度值轉換為小數*100)
if (attr=="opacity") {
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.檢測停止
if (icur!=json[attr]){
flag=false;//當前值沒有達到目標值，標簽為假
}
if (attr=="opacity") {
obj.style.filter="alpha(opacity:"+icur+speed+")";//IE
obj.style.opacity=(icur+speed)/100;//火狐 ?chrome
}
else{
obj.style[attr]=icur+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
2016-09-15
你目前的代碼，下面第1行里只執行了top位移 和 透明屬性變0，后面的函數沒有執行。
///////////////////////////////////////////////////////////
startMove(_this,{top:-25,opacity:0},function(){ ? //1行
_this.style.top=30+"px";????????????????????????????????????//2行
startMove(_this,{top:20,opacity:100}); ? ? ? ? ? ? ? //3行
}); ? ? ? ? ? ? ? ? ??
原因是startMove封裝程序里出了問題。
跟第1行后面的函數程序有關的是
? if(flag){????????????????????????????????????????????????????????????//4行
? ? ? clearInterval(obj.timer);????????????????????????????????//5行
? ? ? ? if(fn){????????????????????????????????????????????????????????//6行
? ? ? ? ? ? ? ? ? ?fn();????????????????????????????????????????????????//7行
? ? ? ? ? ? ? ?}??????????????????????????????????????????????????? ? ???//8行
? ? ? ? }????????????????????????????????????????????????????????????????//9行
//////////////////////////////////////////////////////////////
第4行內的if語句內的flag，它的布爾值永遠都是false，所以下面第6行的函數無法起到作用，與其相連的第1行函數無法執行。
那為什么flag為什么永遠是false呢？我們一線索連著一個線索找。
下面是startMove函數
一開始11行的 ?flag為「true」
到了28行由于沒有達到目標值，flag變為「false」.
到了39行由于flag為「false」,計時器無法清除，計時器將繼續循環，回到了13行繼續。
這時你會發現flag 還是「false」
由于在計時器中缺少 讓flag變成「true」的設置。
計時器中flag無限false，使得41行永遠無法執行。
如何解決？ 答案在最后
////////////////////////////////////////////////////////////
function startMove(obj,json,fn){????????????????????????????//10行
var flag=true;//默認都到達目標???????????????????????????????//11行
clearInterval(obj.timer);????????????????????????????????????????//12行
obj.timer=setInterval(function(){???????????????????????? ? //13行 ? ?計時器
for(var attr in json){????????????????????????????????????????????? ?//14行
//1.取當前值
var icur=0;
//如果屬性為透明度，四舍五入(透明度值轉換為小數*100)
if (attr=="opacity") {
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.檢測停止????????????????????????????????????????????????????????????????????????//27行
if (icur!=json[attr]){????????????????????????????????????????????????????????????? ?//28行
flag=false;//當前值沒有達到目標值，標簽為假????????????????????????????//29行
}
if (attr=="opacity") {
obj.style.filter="alpha(opacity:"+icur+speed+")";//IE
obj.style.opacity=(icur+speed)/100;//火狐 ?chrome
}
else{
obj.style[attr]=icur+speed+"px";
}
}
if(flag){????????????????????????????????????????????????????????????????????????????????//39行
clearInterval(obj.timer);
if(fn){????????????????????????????????????????????????????????????????????????????????? ?//41行
fn();
}
}
},30)
}
////////////////////////////////////////////////////////////////////////////// ? ? ? ? ? ? ?
?? ?????????????? ?
將11行里的 ? ? var flag=true;?
請放到計時器13行的下一行里就行了。