网页动态效果实现与交互逻辑-优快云博客

本文链接：https://blog.youkuaiyun.com/lunwenjun13269950823/article/details/51350589

#div1{
            width: 200px;
            height: 200px;
            background: red;
            position:absolute;
            top: 50px;
            left:0;
            overflow: hidden;
        }
        img{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 200px;
            height: 30px;
            position: absolute;
            top: -30px;
            left: 0;
            background: blue;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="20.jpg">
    <div id="div2">
        <p id="p1">jdlfalfjljflorueoreorllj</p>
    </div>
</div>
<script type="text/javascript">
    var oDiv=document.getElementById("div1");
    var p1Timer=null;
    oDiv.οnmοuseοver=function(){
        var oDiv2=document.getElementById("div2");
        //oP.style.top="0px";
        clearInterval(p1Timer);
        p1Timer=setInterval(function(){
            if(oDiv2.offsetTop>30){
                clearInterval(p1Timer);
            }
            else{
                oDiv2.style.top=oDiv2.offsetTop+5+"px";
            }
        },30);
    }
    oDiv.οnmοuseοut=function(){
        //oP.style.top="-40px";
        clearInterval(p1Timer);
        p1Timer=setInterval(function(){
            var oDiv2=document.getElementById("div2");
            if(oDiv2.offsetTop<-40){
                clearInterval(p1Timer);//清理
            }
            else{
                oDiv2.style.top=oDiv2.offsetTop-5+"px";//做运动
            }
        },30);
    }

   /* var oDiv1Timerid=null;
    var oBt=document.getElementById("bt1");
    oBt.οnclick= function () {
        var oDiv=document.getElementById("div1");

        //1. 启动定时器之前，需要清理之前的定时器。
        clearInterval(oDiv1Timerid);
        //启动定时器，并记录返回值（定时器的标识）
        oDiv1Timerid=setInterval(function(){
            //做运动的部分和清理定时器的部分，放在 if else 里面
            if(oDiv.offsetLeft>600){
                //清理定时器的条件。要注意边界判断！
                clearInterval(oDiv1Timerid);
            }
            else{
                oDiv.style.left=oDiv.offsetLeft+9+"px";
            }
            /!* if(oDiv.offsetLeft>300-9)
             {//最后一步的时候，直接到目标值
             oDiv.style.left="300px";
             }
             else{
             oDiv.style.left=oDiv.offsetLeft+9+"px";
             }*!/
        },30);
    }

    var oBt2=document.getElementById("bt2");
    oBt2.οnclick= function () {
        var oDiv=document.getElementById("div1");
        clearInterval(oDiv1Timerid);
        oDiv1Timerid=setInterval(function(){
            if(oDiv.offsetLeft<0){
                clearInterval(oDiv1Timerid);
            }
            else{
                oDiv.style.left=oDiv.offsetLeft-9+"px";
            }
            /!* if(oDiv.offsetLeft>300-9)
             {//最后一步的时候，直接到目标值
             oDiv.style.left="300px";
             }
             else{
             oDiv.style.left=oDiv.offsetLeft+9+"px";
             }*!/
        },30);
    }*/

</script>

js运动原理