求教：為什么透明度最終回不到1了啊啊啊啊啊???
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js動畫案例</title>
<style type="text/css">
*{
?margin: 0;
?padding: 0;
}
#div1{
padding: 10px;
width: 300px;
background-color: #f4f4f4;
margin: 10px auto;
border: 1px solid #ccc;
}
#div1 a{
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#div1 a i{
position: absolute;
top: 20px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
filter:alpha(opacity=100);
opacity: 1;
}
#div1 a:hover{
color: #f00;
}
? ? </style>
? ? <script src="move.js"></script>
? ? <script type="text/javascript">
? ? ? ?window.onload=function(){
? ? ? ? var oDiv= document.getElementById('div1');
? ? ? ? var aList= oDiv.getElementsByTagName('a');
? ? ? ? for(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='div1'>
<a href="#"><i><img src="baobei.png"></i><p>寶貝</p></a>
<a href="#"><i><img src="dianpu.png"></i><p>店鋪</p></a>
<a href="#"><i><img src="sheying.png"></i><p>攝影</p></a>
<a href="#"><i><img src="wenzhang.png"></i><p>文章</p></a>
<a href="#"><i><img src="cafei.png"></i><p>咖啡</p></a>
<a href="#"><i><img src="tupian.png"></i><p>圖片</p></a>
</div>
</body>
</html>
下面是運動框架:
// function startMove(obj,attr,iTarget,fn) {
function startMove(obj,json,fn) {?
??
? clearInterval(obj.timer);
? obj.timer= setInterval(function(){
? for(var attr in json){
? //1.取當前的值
? var incur=0;
? var flag= true;
? if(attr=='opacity'){
? ? ?incur=Math.round(parseFloat(getStyle(obj,attr))*100);?
? }else{
? ? ?incur=parseInt(getStyle(obj,attr));
? }
? //2.算速度
? var speed= (json[attr]-incur)/15;
? speed= speed>0?Math.ceil(speed):Math.floor(speed);
? //3.檢測停止
? if(incur!=json[attr]){
? ? flag= false;?
? ? if(attr=='opacity'){
? ? ? ?obj.style.filter='alpha(opacity:'+(incur+speed)+')';
? ? ? ?obj.style.opacity=(incur+speed)/100;
? ? }else{
? ? ? ?obj.style[attr]=incur+speed+'px';
? ? ? }
? }
? if(flag){
? ? clearInterval(obj.timer);
? ? if(fn){
? ? ? fn();
? ? }
? }
? }
? },20) ?
}
function getStyle(obj,attr){
? if(obj.currentStyle){
? return obj.currentStyle[attr];//IE
? }else{
? return getComputedStyle(obj,false)[attr];//firefox
? }
}
2016-06-08
clearInterval(obj.timer);
? obj.timer= setInterval(function(){
? for(var attr in json){ ? ??// for的花括號擴到我下面備注的地方
? //1.取當前的值
? var incur=0;
? var flag= true;
? if(attr=='opacity'){
? ? ?incur=Math.round(parseFloat(getStyle(obj,attr))*100);?
? }else{
? ? ?incur=parseInt(getStyle(obj,attr));
? }
? //2.算速度
? var speed= (json[attr]-incur)/15;
? speed= speed>0?Math.ceil(speed):Math.floor(speed);
? //3.檢測停止
? if(incur!=json[attr]){
? ? flag= false;?
? ? if(attr=='opacity'){
? ? ? ?obj.style.filter='alpha(opacity:'+(incur+speed)+')';
? ? ? ?obj.style.opacity=(incur+speed)/100;
? ? }else{
? ? ? ?obj.style[attr]=incur+speed+'px';
? ? ? }
? }?????????
} ? ????????????????????????????//花括號應該擴到這
? if(flag){
? ? clearInterval(obj.timer);
? ? if(fn){
? ? ? fn();
? ? }
? }
? } ? //這個花括號去掉
? },20) ?
}
這樣應該就沒問題了
2016-04-14
你的運動框架代碼有問題
//改正后的move.js
function startMove(obj,json,fn) {?
? clearInterval(obj.timer);
? var flag;
? obj.timer= setInterval(function(){
? flag= true;
? for(var attr in json){
? //1.取當前的值
? var incur=0;
? if(attr=='opacity'){
? ? ?incur=Math.round(parseFloat(getStyle(obj,attr))*100);?
? }else{
? ? ?incur=parseInt(getStyle(obj,attr));
? }
? //2.算速度
? var speed= (json[attr]-incur)/15;
? speed= speed>0?Math.ceil(speed):Math.floor(speed);
? //3.檢測停止
? if(incur!=json[attr]){
? ? flag= false;?
? }
? if(attr=='opacity'){
? ? ? ?obj.style.filter='alpha(opacity:'+(incur+speed)+')';
? ? ? ?obj.style.opacity=(incur+speed)/100;
? ? }else{
? ? ? ?obj.style[attr]=incur+speed+'px';
? ? ? }
? }
? if(flag){
? ? clearInterval(obj.timer);
? ? if(fn){
? ? ? fn();
? ? }
? }
? },20) ?
}
function getStyle(obj,attr){
? if(obj.currentStyle){
? return obj.currentStyle[attr];//IE
? }else{
? return getComputedStyle(obj,false)[attr];//firefox
? }
}
ps：用這個代碼試試