上下移动(鼠标在上半部分往上走,反之相反)

2019/01/25 14:01
阅读数 3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
    
<style>
        *{
            margin:0;
            padding:0;
        }
        .xiaomi{
            width:512px;
            height:400px;
            overflow:hidden;
            position:relative;
            margin:100px auto;
        }
        img{
            position:absolute;
            top:0;          
        }
        .xiaomi span{
            width:100%;
            height:200px;
            display:block;
            position:absolute;
            cursor:pointer;
        }
        .up{
            top:0;      
        }
        .down{
            bottom:0;           
        }
</style>
</head>
<body>
<div class="xiaomi" id="xiaomi">
<img src="images/mi.png" alt="" id="pic"/>
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
</html>
<script src="../public.js"></script>
<script>
    var timerUp = null,timerDown = null;
    var pic = $id("pic");
    $id("picUp").onmouseover = function(){
        timerUp = setInterval( function(){
            if( pic.offsetTop < -(1470-400) ){
                clearInterval( timerUp );
            }else{
                pic.style.top = pic.offsetTop - 2 + "px";
            }
        } , 30 )
    }
    $id("picUp").onmouseout = function(){
        clearInterval( timerUp );
    }
    $id("picDown").onmouseover = function(){
        timerDown = setInterval( function(){
            if( pic.offsetTop > 0 ){
                clearInterval( timerDown );
            }else{
                pic.style.top = pic.offsetTop + 3 + "px";
            }
        },30 )
    }
    $id("picDown").onmouseout = function(){
        clearInterval( timerDown );
    }
</script>





展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部