Home > Developer > JavaScript
how JavaScript implements the scroll bar effect
This article mainly introduced the JavaScript implementation scroll bar effect method, involves the JavaScript operation HTML element realization rolling the related skill, very has the practical value, needs the friend to be possible to refer to under
This article illustrates how JavaScript implements the scroll bar effect. Share to everyone for your reference. Specifically 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 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 5 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 | <! DOCTYPE html> <html> <head lang= "en" > <meta charset= "UTF-8" > <title></title> < style> * {margin:0; padding:0;} #div1 ul{position:absolute; left:0px;} #div1 ul li img {top:0px ; 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:100p X #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; ;/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> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
