欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)長圖上下滾動效果

 更新時間:2020年03月19日 10:55:40   作者:前端coder  
這篇文章主要為大家詳細介紹了JS實現(xiàn)長圖上下滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)長圖上下滾動的具體代碼,供大家參考,具體內(nèi)容如下

案例描述

將一張長圖放在某一固定長寬的盒子里,當鼠標置于盒子的上半部分時,圖片向下滑直到到達圖片的底部停止;當鼠標置于盒子的下半部分時,圖片向上滑直到到達圖片的頂部停止。

案例圖示

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詳解----監(jiān)聽鼠標進入事件(以盒子上半部分為例)

鼠標停留在盒子上半部分時,使用onmouseover事件。首先要清除定時器,否則可能會出現(xiàn)定時器重疊現(xiàn)象;再設置定時器,定時器中的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詳解----監(jiān)聽鼠標移出事件(以盒子上半部分為例)

鼠標移出時使用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>

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論