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程序设计有所帮助。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
