案例描述

将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半部分时，图片向下滑直到到达图片的底部停止；当鼠标置于盒子的下半部分时，图片向上滑直到到达图片的顶部停止。

案例图示

HTML

<div id="box">
        <img id="pic" src="./program1/images/1.jpg" alt="">
        <div id="top"></div>
        <div id="bottom"></div>
</div>

CSS

CSS不作过多解释，详解请看注释部分

//通用样式
    * {
        margin: 0;
        padding: 0;
    }
    #box  {
        width: 750px;
        height: 200px;
        border: 1px solid #000;
        margin: 200px auto;
        overflow: hidden;		/*图片溢出部分隐藏*/
        position: relative;			/*子绝父相*/
    }

    #pic {
        position: absolute;
        left: 0;
        right: 0;
    }

   
    #top {
        width: 100%;
        height: 50%;
        position: absolute;			/*子绝父相*/
        left: 0;
        cursor: pointer;		/*鼠标*/
         /* 顶部对齐 */
        top:0;     
    }
    
    #bottom {
        width: 100%;
        height: 50%;
        position: absolute;			/*子绝父相*/
        left: 0;
        cursor: pointer;
        /* 底部对齐 */
        bottom: 0;
    }
</style>

JS核心代码

JS详解----监听鼠标进入事件（以盒子上半部分为例）

鼠标停留在盒子上半部分时，使用onmouseover事件。首先要清除定时器，否则可能会出现定时器重叠现象；再设置定时器，定时器中的num就是改变图片的top属性以达到图片向上滑动的效果。if语句中的条件是为了达到图片到达底部时停止向上滑的目的。（盒子下半部分类似）

 top.onmouseover = function(){
            // 改变pic中的top   
            // 清除定时器
            // alert(0);
            clearInterval(intervalId);

            // 设置定时器   
            intervalId = setInterval(function(){
                if(num > -600){
                    num -= 10;
                    pic.style.top = num + "px";
                }
                
            },20);

JS详解----监听鼠标移出事件（以盒子上半部分为例）

鼠标移出时使用onmouseout事件，清除定时器。（盒子下半部分类似）

 top.onmouseout = function()  {
            clearInterval(intervalId);
        }

JS全部代码展示

<script>
    window.onload = function() {
        // 获取标签
        var box = document.getElementById('box');
        var pic = document.getElementById('pic');
        var top = document.getElementById('top');
        var bottom = document.getElementById('bottom');
        var intervalId, num = 0;
        // 鼠标进入上半部分
        top.onmouseover = function(){
            // 改变pic中的top   
            // 清除定时器
            // alert(0);
            clearInterval(intervalId);

            // 设置定时器
            intervalId = setInterval(function(){
                if(num > -600){
                    num -= 10;
                    pic.style.top = num + "px";
                }
                
            },20);

        };
         // 鼠标移出上半部分
        top.onmouseout = function()  {
            clearInterval(intervalId);
        }
		 // 鼠标进入下半部分
        bottom.onmouseover = function(){
            // 改变pic中的top   
            // 清除定时器
            // alert(0);
            clearInterval(intervalId);

            // 设置定时器
            intervalId = setInterval(function(){
                if(num < 0){
                    num += 10;
                    pic.style.top = num + "px";
                }
                
            },20);
        };
        // 鼠标移出下半部分
        bottom.onmouseout = function()  {
            clearInterval(intervalId);
        };
        
    }
</script>