html实现图片上下滚动代码,JS如何实现长图上下滚动效果 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 {

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;

}

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全部代码展示

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);

};

}