快捷導(dǎo)航

JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法

更新時(shí)間：2015年04月27日 09:26:52 作者：親愛(ài)的漢尼拔

這篇文章主要介紹了JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法,涉及javascript操作html元素實(shí)現(xiàn)滾動(dòng)的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法。分享給大家供大家參考。具體如下：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  * { 
   margin: 0; 
   padding: 0; 
  } 
  #div1 ul{ 
   position: absolute; 
   left: 0px; 
   top: 0px; 
  } 
  #div1 ul li img { 
   width: 187px; 
   height: 125px; 
  } 
  #div1 ul li{ 
   float: left; 
   width: 187px; 
   height: 125px; 
   list-style: none; 
  } 
  #div1{ 
   width: 748px; 
   height: 125px; 
   position: relative; 
   background-color: chartreuse; 
   overflow: hidden; 
   float: left; 
  } 
  #body{ 
   width: 948px; 
   height: 125px; 
   margin: 100px auto; 
 
  } 
  #body #leftDiv{ 
   float: left; 
   width: 100px; 
   height: 100px; 
  } 
  #body #rightDiv{ 
   float: left; 
   width: 100px; 
   height: 100px; 
  } 
   
  #body #leftDiv button{ 
   background-image: url("image/left.PNG"); 
   width: 100px; 
   height: 100px; 
  } 
  #body #leftDiv button img{ 
   width: 100px; 
   height: 100px; 
  } 
  #body #rightDiv button img{ 
   width: 100px; 
   height: 100px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementById('div1'); 
   var oUl=oDiv.getElementsByTagName('ul')[0]; 
   var oLi=oUl.getElementsByTagName('li'); 
   var oLeft=document.getElementById('leftDiv'); 
   var oright=document.getElementById('rightDiv'); 
   oUl.innerHTML+=oUl.innerHTML; 
   oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; 
   var speed=-2; 
   function move(){ 
    if (oUl.offsetLeft<-oUl.offsetWidth/2){ 
     oUl.style.left='0'; 
    }else if(oUl.offsetLeft>0){ 
     oUl.style.left=-oUl.offsetWidth/2+'px'; 
    } 
    oUl.style.left=oUl.offsetLeft+speed+'px'; 
   }; 
   var timer=setInterval(move,30); 
   oLeft.onclick=function(){ 
    speed=-2; 
   }; 
   oright.onclick= function () { 
    speed=2; 
   }; 
   oUl.onmouseover=function(){ 
    clearInterval(timer); 
   }; 
   oUl.onmouseout=function(){ 
    timer=setInterval(move,30); 
   }; 
  } 
 </script> 
</head> 
<body> 
<div id="body"> 
 <div id="leftDiv"><button><img src="image/left.PNG"/></button></div> 
 <div id="div1"> 
  <ul> 
   <li><img src="image/1.JPG"/></li> 
   <li><img src="image/2.JPG"/></li> 
   <li><img src="image/3.JPG"/></li> 
   <li><img src="image/4.JPG"/></li> 
  </ul> 
 </div> 
 <div id="rightDiv"><button><img src="image/right.PNG"/></button></div> 
</div> 
</body> 
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

PHP使用curl模擬post上傳及接收文件的方法
這篇文章主要介紹了PHP使用curl模擬post上傳及接收文件的方法,涉及PHP使用curl實(shí)現(xiàn)post文件傳輸?shù)南嚓P(guān)技巧,需要的朋友可以參考下
2016-03-03
使用VisualStudio開(kāi)發(fā)php的圖文設(shè)置方法
早先在asp橫行的年代，php和asp一樣，大都都是html中夾雜代碼，說(shuō)實(shí)話，這時(shí)候IDE的確用處不是很大，倒是類似于dw之類的設(shè)計(jì)器甚為上手。
2010-08-08
PHP獲取域名的方法和技巧
在Web開(kāi)發(fā)中,獲取域名相關(guān)信息,是一項(xiàng)必備的能力,而PHP天生地具有解析URI的能力,所以PHP獲取域名也變得非常簡(jiǎn)單,在這里整理了一些,PHP獲取域名的方法和技巧,需要的朋友可以參考下
2023-08-08
Ajax+Jpgraph實(shí)現(xiàn)的動(dòng)態(tài)折線圖功能示例
這篇文章主要介紹了Ajax+Jpgraph實(shí)現(xiàn)的動(dòng)態(tài)折線圖功能,結(jié)合實(shí)例形式分析了ajax結(jié)合jpgraph.php類庫(kù)繪制動(dòng)態(tài)折線圖的相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
thinkphp5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱的示例
這篇文章主要介紹了thinkphp5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
PHP獲取欄目的所有子級(jí)和孫級(jí)欄目的ID號(hào)示例
這篇文章主要介紹了PHP獲取欄目的所有子級(jí)和孫級(jí)欄目的ID號(hào)的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-04-04
Yii2設(shè)置默認(rèn)控制器的兩種方法
安裝好Yii2后,Yii2的默認(rèn)的控制器是SiteController,新建Modules的時(shí)候默認(rèn)的控制器是DefaultController.如果開(kāi)發(fā)和路由需要修改成其他控制器為默認(rèn)的控制器的話。下面這篇文章主要給大家介紹了關(guān)于Yii2設(shè)置默認(rèn)控制器的兩種方法，需要的朋友可以參考下。
2017-05-05
php中靜態(tài)類與靜態(tài)變量用法的區(qū)別分析
這篇文章主要介紹了php中靜態(tài)類與靜態(tài)變量用法的區(qū)別,以實(shí)例形式較為詳細(xì)的分析了php中靜態(tài)類與靜態(tài)變量的定義、功能及使用技巧,需要的朋友可以參考下
2015-01-01
async和DOM Script文件加載比較
async與script動(dòng)態(tài)加載都能使文件異步加載，本文敘述它們對(duì)頁(yè)面渲染和load加載的影響方面。
2014-07-07
PHP curl 并發(fā)最佳實(shí)踐代碼分享
在實(shí)際項(xiàng)目或者自己編寫(xiě)小工具(比如新聞聚合,商品價(jià)格監(jiān)控,比價(jià))的過(guò)程中, 通常需要從第3方網(wǎng)站或者API接口獲取數(shù)據(jù), 在需要處理1個(gè)URL隊(duì)列時(shí), 為了提高性能, 可以采用cURL提供的curl_multi_*族函數(shù)實(shí)現(xiàn)簡(jiǎn)單的并發(fā)
2012-09-09