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

请问老师怎么实现多个这种效果？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js运动框架</title>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
        }
        .div1{
            width:200px;
            height:200px;
            background:red;
            filter: alpha(opacity:30);
            opacity: 0.3;
            float:left;
            margin-left:10px;
        }
        /* #div1 .share{
            width:20px;
            height:50px;
            background: blue;
            position: absolute;
            left: 200px;
            top:75px;
        } */
    </style>
    <script type="text/javascript">
        window.onload=function(){//表示当页面加载完成后执行这个函数方法；
            var oDiv=document.getElementById("div1");//绑定js将要作用的dom对象的某个节点；即声明一个对象且对象是通过这个document的方法getElementById(" ")得来的；注意这块是局部变量，所以下面构造的函数必须重新获取id的值；
            oDiv.onmouseover=function(){//给onmouseover鼠标移入事件绑定一个函数方法；
                startMove(100);//代码真正作用的执行块，调用这个构造函数的方法；
            }   
            oDiv.onmouseout=function(){//给onmouseout鼠标移出事件绑定一个函数方法；
               startMove(30); //代码真正作用的执行块，调用这个构造函数的方法;实参；
            }
        }
        var timer=null;//定义一个计时器对象且为空值；
        var alpha=30;
        function startMove(target){
            var oDiv=document.getElementById("div1");
            clearInterval(timer);//清除计时器，防止多次触发叠加；
            <!--定义一个计时器-->
            timer=setInterval(function(){
            var speed=0;//定义一个速度改变量；
            if (alpha>target) {
                speed=-10;
            } else {
                speed=10;
            }
            if (alpha==target) {
                clearInterval(timer);
            }else{
                alpha+=speed;
                //oDiv.style.filter="alpha(opacity:"+alpha+")";
                oDiv.style.opacity=alpha/100;
            }        
            },30);
        }

    </script>
</head>
<body >
    <div>
        <span>
            分享
        </span> 
    </div>
    <div>
        <span>
            分享
        </span> 
    </div>
    <div>
        <span>
            分享
        </span> 
    </div>
</body>
</html>

带着棒棒糖上战场

2016-09-15

源自：JS动画效果 2-2

关注问题我要回答

589

操作

收起

2 回答

一城一梦梦在指尖
2016-09-16

//获取需要定义动画的元素的集合
var oDiv=document.getElementsByTagName("div");
//遍历，集合中的每一个元素都赋予其onmouseover和onmouseout方法值
for(var i=0;i<oDiv.length;i++){
    oDiv[i].onmouseover=function(){
        ....
    }
}