How to implement scroll bar effect in JavaScript_PHP tutorial

How to implement the scroll bar effect using JavaScript

　 How to implement the scroll bar effect using JavaScript

This article mainly introduces the method of using JavaScript to achieve the scroll bar effect, involving techniques related to JavaScript operating html elements to achieve scrolling. It is of great practical value. Friends who need it can refer to it

The example in this article describes how to implement the scroll bar effect in JavaScript. Share it with everyone for your reference. The details are as follows:

　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

<script></p> <p>window.onload=function(){</p> <p>var oDiv=document.getElementById('div1');</p> <p>var oUl=oDiv.getElementsByTagName('ul')[0];</p> <p>var oLi=oUl.getElementsByTagName('li');</p> <p>var oLeft=document.getElementById('leftDiv');</p> <p>var oright=document.getElementById('rightDiv');</p> <p>oUl.innerHTML =oUl.innerHTML;</p> <p>oUl.style.width=oLi[0].offsetWidth*oLi.length 'px';</p> <p>var speed=-2;</p> <p>function move(){</p> <p>if (oUl.offsetLeft<-oUl.offsetWidth/2){</p> <p>oUl.style.left='0';</p> <p>}else if(oUl.offsetLeft>0){</p> <p>oUl.style.left=-oUl.offsetWidth/2 'px';</p> <p>}</p> <p>oUl.style.left=oUl.offsetLeft speed 'px';</p> <p>};</p> <p>var timer=setInterval(move,30);</p> <p>oLeft.onclick=function(){</p> <p>speed=-2;</p> <p>};</p> <p>oright.onclick= function () {</p> <p>speed=2;</p> <p>};</p> <p>oUl.onmouseover=function(){</p> <p>clearInterval(timer);</p> <p>};</p> <p>oUl.onmouseout=function(){</p> <p>timer=setInterval(move,30);</p> <p>};</p> <p>}</p> <p></script>

　　希望本文所述对大家的javascript程序设计有所帮助。

http://www.bkjia.com/PHPjc/990995.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/990995.htmlTechArticleJavaScript实现滚动栏效果的方法 JavaScript实现滚动栏效果的方法 这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素...