                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

要怎么修改才能不只是第一个有用，其他的都有用

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="utf-8"/>
   <style type="text/css">
   *{
       padding: 0;margin: 0;
   }
   #div1{
       border: 1px solid blue;background-color: #8e8e8e;width:500px;height: 500px;margin: 20px auto;text-align: center;overflow: hidden;
   }

   #div1 a{
            float:left;width: 70px;height: 70px;margin:10px auto;border:1px solid pink;background-color: #fff;margin-top: 100px;margin-left:70px; padding-top: 10px;text-decoration: none;position: relative;}

   #div1 a:hover{
       color: red;
   }
   #div1 a p{
       padding-top: 10px;position: absolute;top: 48px; left:10px;
   }
   #div1 a i {position: absolute;top :20px;left :20px;

       text-align: center;filter: alpha(opacity=100);
       opacity: 1;
   }
   #div1 img{
       border:none;
   }

   </style>
   <script type="text/javascript">
       window.onload=function(){
       var oDiv=document.getElementById("div1");
       var alist=oDiv.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});
           });
       }

       }
   }
   function getStyle(oDiv,attr){
       if (oDiv.currentStyle) {
           return oDiv.currentStyle[attr];
       }
       else{
           return getComputedStyle[attr];
       }
   }
   function startMove(oDiv,json,fn){

       clearInterval(oDiv.timer);
       oDiv.timer=setInterval(function(){
           var flag=true;
           for(var attr in json){
               //取得当前值
               var icur=0;
               if(attr=="opacity"){
                   icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
               }else {
                   icur=parseInt(getStyle(oDiv,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"){
                   oDiv.style.filter="alpha(opacity:"+(icur+speed)+")";
                   oDiv.style.opacity=(icur+speed)/100;

               }else{
                   oDiv.style[attr]=icur+speed+"px"

               }
           }
           if(flag){
                   clearInterval(oDiv.timer);
                   if(fn){
                       fn();
                   }
           }
       },30);
   }
   </script>

</head>

<body>
<div id="div1">
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
   <a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>

</div>
</body>
</html>

慕粉4094316

2016-11-16

源自：JS动画效果 7-1

关注问题我要回答

488

操作

收起

2 回答

我就叫李二毛
2017-01-02

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

#div1 {
border: 1px solid blue;
background-color: #8e8e8e;
width: 500px;
height: 500px;
margin: 20px auto;
text-align: center;
overflow: hidden;
}

#div1 a {
float: left;
width: 70px;
height: 70px;
margin: 10px auto;
border: 1px solid pink;
background-color: #fff;
padding-top: 10px;
text-decoration: none;
position: relative;
}

#div1 a:hover {
color: red;
}

#div1 a p {
padding-top: 10px;
position: absolute;
top: 48px;
left: 10px;
}

#div1 a i {
position: absolute;
top: 20px;
left: 20px;

text-align: center;
filter: alpha(opacity=100);
opacity: 1;
}

#div1 img {
border: none;
}

</style>
<script type="text/javascript">
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //ie下获取属性
} else {
return getComputedStyle(obj, false)[attr]; //chrome,火狐下获取属性的写法,dom标准的全局写法。特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制的'#ffffff'，而FF返回的是rgb(255,255,255)
}
}
function startMove(obj, json, fn) { //创建一个函数，有三个参数。标签，属性，目标值。
clearInterval(obj.timer); //第一步，清除定时器
var flag = true;
obj.timer = setInterval(function () {//重新写的定时器

for (var attr in json) {
//取当前值
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //判断ie浏览器下计算的值。
} else {
icur = parseInt(getStyle(obj, attr)); //除ie外计算的值。

}
//算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//检测停止
if (icur != json[attr]) {
flag = false;
} else {
flag = true;
}

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)
}

window.onload = function () {
var oDiv = document.getElementById("div1");
var alist = oDiv.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="div1">
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>
<a href="#"><i><img src="images/food.png"/></i>
<p>搜索框</p></a>

</div>
</body>