溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了JS實現長圖上下滾動的具體代碼，供大家參考，具體內容如下
案例描述
將一張長圖放在某一固定長寬的盒子里，當鼠標置于盒子的上半部分時，圖片向下滑直到到達圖片的底部停止；當鼠標置于盒子的下半部分時，圖片向上滑直到到達圖片的頂部停止。
案例圖示
HTML
<div id="box"> <img id="pic" src="./program1/images/1.jpg" alt=""> <div id="top"></div> <div id="bottom"></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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
