JavaScript之圖片操作4
阿新 • • 發佈：2018-08-27
.com head mouseover 實現圖 utf set java 步長 技術分享
本次要實現的效果是，在一個盒子裏面有一張長圖，只顯示了一部分，為方便用戶瀏覽，當鼠標移入時，圖片開始滾動，將盒子分成上下兩部分，當鼠標移入上部分時，圖片向上滾動，當鼠標移入下部分時，圖片向下滾動。
為了實現上面的效果，我們需要在html中進行簡單的布局：
<div id="box"> <img id="pic" src="images/timg.jpg" alt=""> <span id="to_top"></span> <span id="to_bottom"></span> </div>
其中div為外層固定大小的大盒子，因為圖片大於盒子，所以需要將盒子設置超出隱藏，圖片上下滾動式通過定位實現的，需要將圖片設置為相對父級定位，通過兩個span來判斷鼠標移入時的位置是在上半部分還是下半部分，所以兩個span均為盒子的一半，分別位於盒子的上半部分和下半部分。
<style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; }#box{ width: 750px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; position: relative; } #pic{ position: absolute; left: 0; top: 0; } #to_top, #to_bottom{ width: 100%; height: 50%; /*background-color: greenyellow;*/ position: absolute; left: 0; cursor: pointer; } #to_top{ top: 0; } #to_bottom{ bottom: 0; } </style>
接下來開始寫相應的事件，首先需要獲取相應的元素標簽
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
然後監聽鼠標事件，並用定時器實現動畫效果。
to_top.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
to_bottom.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
box.onmouseout = function () {
clearInterval(timer);
}
現在基本可以實現圖片相應鼠標，進行上下滑動了，但還是有問題，首先是定時器累加，其次是圖片無限制的上下滑動，針對這兩個問題，我們需要在每次鼠標進入時清除定時器，另外就是判斷滾動的臨界值：
- 圖片向下滾動時，頂部距離父級元素的位置不能大於0，即初始的默認值位置
- 圖片向上滾動時，頂部距離父級元素的位置不能小於圖片長度與盒子高度的差值
根據上面的兩點，重新整理上面的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } #box{ width: 750px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; position: relative; } #pic{ position: absolute; left: 0; top: 0; } #to_top, #to_bottom{ width: 100%; height: 50%; /*background-color: greenyellow;*/ position: absolute; left: 0; cursor: pointer; } #to_top{ top: 0; } #to_bottom{ bottom: 0; } </style> </head> <body> <div id="box"> <img id="pic" src="images/timg.jpg" alt=""> <span id="to_top"></span> <span id="to_bottom"></span> </div> <script> window.onload = function () { // 1. 獲取標簽 var box = document.getElementById("box"); var pic = document.getElementById("pic"); var to_top = document.getElementById("to_top"); var to_bottom = document.getElementById("to_bottom"); var timer = null, num = 0; // 2. 監聽鼠標事件 to_top.onmouseover = function () { // 2.1 清除定時器 clearInterval(timer); // 2.2 設置定時器 timer = setInterval(function () { // 步長 num -= 10; // 判斷 if(num >= -2466){ pic.style.top = num + ‘px‘; }else { clearInterval(timer); } }, 20); }; to_bottom.onmouseover = function () { // 2.1 清除定時器 clearInterval(timer); // 2.2 設置定時器 timer = setInterval(function () { // 步長 num += 10; // 判斷 if(num <= 0){ pic.style.top = num + ‘px‘; }else { clearInterval(timer); } }, 20); }; box.onmouseout = function () { // 清除定時器 clearInterval(timer); } } </script> </body> </html>
完整代碼下載鏈接：點這裏
JavaScript之圖片操作4