js页面全屏垂直滚动效果
分类:实例代码
分享一段代码实例,它实现了页面垂直滚动效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } #content { overflow: hidden; } #all-page { transition: 1s; } #page-one { background-color: red; } #page-two { background-color: blue; } #page-three { background-color: green; } </style> </head> <body> <div id='content'> <div id="all-page"> <div id="page-one"> <button class='toUp' index="0">点击向上</button> </div> <div id="page-two"> <button class='toDown' index="0">点击向下</button> <button class='toUp' index="1">点击向上</button> </div> <div id="page-three"> <button class='toDown' index="1">点击向下</button> </div> </div> </div> <script> var tHeight = document.documentElement.clientHeight; var content = document.getElementById("content"); var allPage = document.getElementById("all-page"); var pageOne = document.getElementById("page-one"); var pageTwo = document.getElementById("page-two"); var pageThree = document.getElementById("page-three"); content.style.height = tHeight + "px"; pageOne.style.height = tHeight + "px"; pageTwo.style.height = tHeight + "px"; pageThree.style.height = tHeight + "px"; function swiperUp(button, distance) { var swiperBotton = allPage.querySelectorAll(button) for (var i = 0; i < swiperBotton.length; i++) { swiperBotton[i].onclick = function() { var x = parseFloat(this.getAttribute("index")) allPage.style.transform = "translate3d(0px," + -distance * (x + 1) + "px,0px)" } } } function swiperDown(button, distance) { var swiperBotton = allPage.querySelectorAll(button) for (var i = 0; i < swiperBotton.length; i++) { swiperBotton[i].onclick = function() { var x = parseFloat(this.getAttribute("index")) allPage.style.transform = "translate3d(0px," + -distance * x + "px,0px)" } } } swiperUp(".toUp", tHeight) swiperDown(".toDown", tHeight) </script> </body> </html>
js页面全屏垂直滚动效果,这样的场景在实际项目中还是用的比较多的,关于js页面全屏垂直滚动效果就介绍到这了。
js页面全屏垂直滚动效果属于前端实例代码,有关更多实例代码大家可以查看。