html上下滚动效果图片,JS实现长图上下滚动效果

本文实例为大家分享了JS实现长图上下滚动的具体代码，供大家参考，具体内容如下

案例描述

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

案例图示

HTML

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 {