JavaScript實現滾動欄效果的方法

2020-03-22 18:03:16

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript實現滾動欄效果的方法。分享給大家供大家參考。具體如下： !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. unction(){ speed=-2; oright. function () { speed=2; oUl. unction(){ 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" 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 希望本文所述對大家的javascript程序設計有所幫助。PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：JavaScript中一些常用的正則表達式(推薦)

下一篇：比較全面的C 、Java、JavaScript中的正則表達式詳解