JavaScript圖片橫向無縫滾動詳解

admin發表於2018-09-07
JavaScript

圖片橫向滾動效果在大量的網站都有應用，比如企業網站對產品的展示功能就大量應用類似效果。

下面就通過程式碼例項詳細介紹一下此效果的實現原理。

更多圖片無縫滾動效果可以檢視圖片文字無縫滾動特效分類。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>js圖片橫向滾動程式碼例項-螞蟻部落</title>
<style type="text/css"> 
*{
  margin:0px;
  padding:0px;
}
.box{ 
  margin:0 auto; 
  height:70px; 
  width:610px; 
  padding:10px; 
  border:1px solid #FF0000; 
} 
#goleft{
  width:600px;
  height:70px;
  overflow:scroll;
} 
#goleft #gols{
  width:1320px;
}
#goleftone,#golefttwo {
  width:auto;
  float:left;
} 
a{
  width:100px;
  height:60px;
  background-color:#CCC;
  display:block;
  text-align:center;
  line-height:60px;
  float:left;
  margin-left:10px;
  text-decoration:none;
}
</style> 
<script type="text/javascript"> 
var spend=20; 
var flag;
function Marquee(){ 
  if(golefttwo.offsetWidth-goleft.scrollLeft<=0) { 
    goleft.scrollLeft-=goleftone.offsetWidth; 
  } 
  else{ 
    goleft.scrollLeft++; 
  } 
}
function handlerMover() { 
  clearInterval(flag) 
} 
function handlerOut() { 
  flag=setInterval(Marquee,spend) 
} 
window.onload=function(){
  var goleft=document.getElementById('goleft'); 
  var goleftone=document.getElementById('goleftone'); 
  var golefttwo=document.getElementById('golefttwo'); 
   
  golefttwo.innerHTML=goleftone.innerHTML; 
  flag=setInterval(Marquee,spend);
  goleft.onmouseover=handlerMover;
  goleft.onmouseout=handlerOut;
}
</script> 
</head> 
<body> 
<div class="box"> 
  <div id="goleft"> 
    <div id="gols"> 
     <div id="goleftone"> 
       <a href="#">螞蟻部落一</a> 
       <a href="#">螞蟻部落二</a> 
       <a href="#">螞蟻部落三</a> 
       <a href="#">螞蟻部落四</a> 
       <a href="#">螞蟻部落五</a> 
       <a href="#">螞蟻部落六</a> 
     </div> 
     <div id="golefttwo"></div> 
   </div> 
  </div> 
</div> 
</body> 
</html>

特別說明:將#goleft的overflow設定為scroll有助於理解。

程式碼實現了圖片無縫不間斷滾動，圖片用文字替代，在真正需要的時候，可以用圖片即可。

一.實現原理:

通過定時器函式setInterval不斷的呼叫Marquee函式，Marquee每執行一次都能夠將goleft元素的scrollLeft屬性值加1，當此屬性值大於等於goleftone和golefttwo寬度的時候，也就是說goleftone剛好完全被gols元素隱藏，此時，golefttwo恰好在後面接續，然後再將goleft的scrollLeft屬性值設定為0，於是就實現了無縫不間斷滾動效果。

二.程式碼註釋:

（1）.var spend=20，設定滾動速度，值越小滾動速度越快。

（1）.var flag，宣告一個變數用來存放定時器函式setInterval()的返回值。

（1）.function Marquee(){}，宣告一個函式，此函式是實現此特效的核心。

（1）.if(golefttwo.offsetWidth-goleft.scrollLeft<=0)，判斷golefttwo的寬度是否小於等於goleft元素左邊被遮擋的部分的寬度。

（1）.goleft.scrollLeft-=goleftone.offsetWidth，由上面可以看到當golefttwo.offsetWidth等於goleft.scrollLeft的時候，將goleft.scrollLeft的值重新設定為零。

（1）.goleft.scrollLeft++，否則此屬性值遞增。

（1）.function handlerMover(){}，宣告一個函式作為onmouseover事件處理函式。

（1）.clearInterval(flag)，停止定時器函式的執行。

（1）.function handlerOut(){}，宣告一個函式作為onmouseout事件處理函式。

（1）.flag=setInterval(Marquee,spend)，使用定時器函式每隔20毫秒呼叫一次Marquee函式。

（1）.window.onload=function(){}，當文件完全載入完成再去執行函式中的程式碼。

（1）.var goleft=document.getElementById('goleft')，獲取'物件

（1）.golefttwo.innerHTML=goleftone.innerHTML，將內容賦值給golefttwo元素。

（1）.goleft.onmouseover=handlerMover，註冊事件處理函式。

三.相關閱讀:

（1）.offsetWidth和scrollLeft參閱scrollTop、offsetHeight和offsetTop等屬性用法一章節。

（1）.clearInterval()參閱window clearInterval()一章節。

（1）.setInterval()參閱setInterval()函式用法詳解一章節。

相關文章