您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了JS實(shí)現(xiàn)長(zhǎng)圖上下滾動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
案例描述
將一張長(zhǎng)圖放在某一固定長(zhǎng)寬的盒子里,當(dāng)鼠標(biāo)置于盒子的上半部分時(shí),圖片向下滑直到到達(dá)圖片的底部停止;當(dāng)鼠標(biāo)置于盒子的下半部分時(shí),圖片向上滑直到到達(dá)圖片的頂部停止。
案例圖示
HTML
<div id="box"> <img id="pic" src="./program1/images/1.jpg" alt=""> <div id="top"></div> <div id="bottom"></div>
CSS
CSS不作過多解釋,詳解請(qǐng)看注釋部分
//通用樣式 * { 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; /*鼠標(biāo)*/ /* 頂部對(duì)齊 */ top:0; } #bottom { width: 100%; height: 50%; position: absolute; /*子絕父相*/ left: 0; cursor: pointer; /* 底部對(duì)齊 */ bottom: 0; } </style>
JS核心代碼
JS詳解----監(jiān)聽鼠標(biāo)進(jìn)入事件(以盒子上半部分為例)
鼠標(biāo)停留在盒子上半部分時(shí),使用onmouseover事件。首先要清除定時(shí)器,否則可能會(huì)出現(xiàn)定時(shí)器重疊現(xiàn)象;再設(shè)置定時(shí)器,定時(shí)器中的num就是改變圖片的top屬性以達(dá)到圖片向上滑動(dòng)的效果。if語句中的條件是為了達(dá)到圖片到達(dá)底部時(shí)停止向上滑的目的。(盒子下半部分類似)
top.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num > -600){ num -= 10; pic.style.top = num + "px"; } },20);
JS詳解----監(jiān)聽鼠標(biāo)移出事件(以盒子上半部分為例)
鼠標(biāo)移出時(shí)使用onmouseout事件,清除定時(shí)器。(盒子下半部分類似)
top.onmouseout = function() { clearInterval(intervalId); }
JS全部代碼展示
<script> window.onload = function() { // 獲取標(biāo)簽 var box = document.getElementById('box'); var pic = document.getElementById('pic'); var top = document.getElementById('top'); var bottom = document.getElementById('bottom'); var intervalId, num = 0; // 鼠標(biāo)進(jìn)入上半部分 top.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num > -600){ num -= 10; pic.style.top = num + "px"; } },20); }; // 鼠標(biāo)移出上半部分 top.onmouseout = function() { clearInterval(intervalId); } // 鼠標(biāo)進(jìn)入下半部分 bottom.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num < 0){ num += 10; pic.style.top = num + "px"; } },20); }; // 鼠標(biāo)移出下半部分 bottom.onmouseout = function() { clearInterval(intervalId); }; } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。