首页 > 代码库 > javascript中全屏滑动效果实现
javascript中全屏滑动效果实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, ol { list-style: none; } html, body, ul, ul li { width: 100%; height: 100%; } ol { position: fixed; top: 50px; left: 50px; } ol li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; cursor: pointer; } </style></head><body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul><ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol><!--ol>li{$}*5--><script> var timer = null; //var leader = 0; //找人 var ol = document.getElementsByTagName("ol")[0]; var olLis = ol.children; var ul = document.getElementsByTagName("ul")[0]; var ulLis = ul.children; var arr = ["red", "orange", "yellow", "green", "blue"]; for (var i = 0; i < arr.length; i++) { olLis[i].style.backgroundColor = arr[i]; ulLis[i].style.backgroundColor = arr[i]; } /*window.onscroll = function () { leader = window.pageYOffset;//当前页面被卷去的头部 };*/ //给所有的olLis注册点击事件 for (var j = 0; j < olLis.length; j++) { olLis[j].index = j; olLis[j].onclick = function () { //让窗体滚动到指定位置 //就是要滚动到 要去的ul 的 offsetTop的值 //当前点击的是ol中的哪个li 就去到ul中的那个li var target = ulLis[this.index].offsetTop; //window.scrollTo(0, target); //之前封装的缓动框架只能设置属性 而我们这里要的是一个渐渐变化的值 clearInterval(timer); timer = setInterval(function () { //step = (target - leader) / 10 //leader = leader + step var leader = window.pageYOffset;//当前页面被卷去的头部 var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //console.log(leader); window.scrollTo(0, leader); if (leader === target) { clearInterval(timer); } }, 20); }; }</script></body></html>
javascript中全屏滑动效果实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。