dom04 移动盒子案例

最新推荐文章于 2023-02-26 22:51:57 发布

JunXian9102

最新推荐文章于 2023-02-26 22:51:57 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/smiple9102/article/details/64921377

版权

js-dom基础课堂笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

移动盒子案例
鼠标经过长图往上走，鼠标经过长图往下走

<script>
    var timer=null;
    var y=0;//用变量记录top的初始值
    var pic=document.getElementById('pic');
    var goUp=document.getElementById('goUp');
    var goDown=document.getElementById('goDown');
    goUp.onmouseover=function  () {
        //防止定时器重复所以清除定时器
        clearInterval(timer);
        timer=setInterval(function () {
            if (y>-1070) {
                y -=5;
       pic.style.top=y+"px";
            }else{
                 clearInterval(timer);
            };     
    },15);   
    }
    goDown.onmouseover=function  () {
        //防止定时器重复所以清除定时器
        clearInterval(timer);
        timer=setInterval(function () {
        if (y<0) {
        y +=5;
       pic.style.top=y+"px";
        }else{
            clearInterval(timer);
            };        
    },15);    
    }
    goDown.parentNode.onmouseout=function(){
        clearInterval(timer); 
    }
</script>