Home >Web Front-end >HTML Tutorial >H5+C3+JS realizes floor jumping special effects
This time I will bring you H5 C3 JS to realize floor jumping special effects. What are the precautions for H5 C3 JS to realize floor jumping special effects. The following is a practical case, let’s take a look.
<!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: none; height: 100%; } ul li{ height: 100%; } ol{ list-style: none; position: fixed; top:200px; left: 50px; } ol li{ width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; } </style> </head> <body> <ul> <li>第一区域</li> <li>第二区域</li> <li>第三区域</li> <li>第四区域</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <script type="text/javascript" src="myScroll.js"></script> <script type="text/javascript"> // 点击ol的li,屏幕滑动到对应的ul的li // 利用window.scrollTo();缓动动画实现 var ul = document.getElementsByTagName("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; var ulLiArr = ul.children; var olLiArr = ol.children; var target = 0; var leader = 0; var timer = null; // 1. 指定ul和ol中li的背景色,对应li的背景色相同 var arrColor = ["green","orange","yellow","red","gold"]; // 利用for循环给两个数组中的元素上色 for(var i=0; i<arrColor.length; i++){ ulLiArr[i].style.backgroundColor = arrColor[i]; olLiArr[i].style.backgroundColor = arrColor[i]; // 属性绑定索引值 olLiArr[i].index = i; // 循环绑定,为每一个li绑定点击事件 olLiArr[i].onclick =function(){ // 获取目标位置 target = ulLiArr[this.index].offsetTop; clearInterval(timer); // 利用缓动动画原理实现屏幕滑动 timer = setInterval(function(){ // (1).获取步长 var step = (target-leader)/10; // (2).二次处理步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); // (3).屏幕滑动 leader = leader + step; window.scrollTo(0, leader); // (4).清除定时器 if(Math.abs(target-leader) <= Math.abs(step)){ window.scrollTo(0, target); clearInterval(timer); } }, 25); } // 用scroll事件模拟盒子距离最顶端的距离 window.onscroll = function(){ // 每次屏幕滑动,把屏幕卷去的值赋给leader,模拟获取显示区域距离顶部的距离 leader = scroll().top; } } </script> </body> </html>
myScroll.js
function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是0,所以需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器,来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } }
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Echarts implements dynamic color-changing histogram
jquery implements all-select and inverse-select radio selection
jQuery operation background color gradient animation effect
The above is the detailed content of H5+C3+JS realizes floor jumping special effects. For more information, please follow other related articles on the PHP Chinese website!