Javascript 实现全屏滚动实例代码
程序员文章站
2023-02-23 11:33:53
js 全屏滚动
参照fullpage.js的效果,用自己的想法实现的。
实现的效果:1、全屏滚动,滚动一下齿轮就会滚动全屏。
2、自适应缩放,无论怎么改变窗口的大小,...
js 全屏滚动
参照fullpage.js的效果,用自己的想法实现的。
实现的效果:1、全屏滚动,滚动一下齿轮就会滚动全屏。
2、自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏。
下一步计划:
1、改成react组件
2、实现更多的效果
注释写的很清楚,基本上知道函数怎么用就可以了。有想法这东西就很简单。
这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用。框架相关:点击这里
注释非常详细了,就不说其他的了。直接上代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> </head> <style> *{ margin: 0; padding: 0; } div{ width: 100%; height: 100%; } .one{ background-color: #1bbc9b; } .sec{ background-color: #4bbfc3; } .thr{ background-color: #7baabe; } </style> <body> <div class="full one">1</div> <div class="full sec">2</div> <div class="full thr">3</div> </body> <script> //添加滚动监听 document.addeventlistener('mousewheel',wheel,false); //判断一次滚动是是否完成 var iscomplete = true; //隐藏滚动条 document.body.style.overflow='hidden'; //获取滚动的元素 var fulllist = document.getelementsbyclassname("full"); //因为是类数组对象,不是数组对象,所以只能使用call的方式来调用 array.prototype.foreach.call(fulllist,function(value){ //获取一个网页满屏的高 value.style.height = window.innerheight +'px'; }) //如果窗口大小改变执行的函数 window.onresize = function(){ array.prototype.foreach.call(fulllist,function(value){ value.style.height = window.innerheight +'px'; }); //改变窗口大小后,应该仍是一个元素占满全屏 if(document.body.scrolltop % window.innerheight) { iscomplete = false; //根据四舍五入判断滚动位置 let tmp = math.round(document.body.scrolltop / window.innerheight)* window.innerheight; //使用运动框架 showanimate(document.body,{'scrolltop':tmp},function(){ iscomplete = true; }); } }; //滚动函数 function wheel(e){ //等待上一个滚动完成 if(iscomplete){ //滚动进行时 iscomplete = false; //判断是往上滚动还是往下滚动 if(e.wheeldelta < 0){ //要滚动到的点 let arrivepoint = document.body.scrolltop + window.innerheight; //最大的滚动点 let maxbottom = document.body.offsetheight - window.innerheight; //如果超出了最大的滚动点,则赋值为最大滚动点 arrivepoint = arrivepoint > maxbottom ? maxbottom : arrivepoint; showanimate(document.body,{'scrolltop':arrivepoint},function(){ iscomplete = true; }); }else{ let arrivepoint = document.body.scrolltop - window.innerheight; //最小滚动点为0 arrivepoint = arrivepoint < 0 ? 0 :arrivepoint; showanimate(document.body,{'scrolltop':arrivepoint},function(){ iscomplete = true; }); } } } /** *函数作用:执行动画 *接受参数:obj(需要运动的dom元素) * json(需要改变的属性集合,json格式) * fn(回调函数) */ function showanimate(obj,json,fn){ clearinterval(obj.timer); //表示运动是否都已经停止 var flag = true; obj.timer=setinterval(function(){ //循环json for(var i in json){ if(i == 'opacity'){ //获取透明度值,round四舍五入去除小数点 var icur = math.round(parsefloat(getstyle(obj,i))*100); } else{ //获取属性值 var icur = parseint(getstyle(obj,i))||obj[i]; } //缓冲运动,speed随时变换 var speed = (json[i]-icur)/10;//千万要写在定时器里面,写在外面会有意想不到的后果 speed = speed > 0 ? math.ceil(speed):math.floor(speed);//速度向上或者下取整,防止到不了over位置 //如果有一个没到达终点就是false if(json[i] !== icur){ flag = false; }else{ flag = true; } if(i == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';//ie兼容 obj.style.opacity = (icur+speed)/100; }else if(obj[i]||obj[i] == 0){ obj[i] = icur + speed; } else{ obj.style[i] = icur+speed+'px'; } console.log(icur + ' ' + json[i]); } //检查是否所有的运动都已经停止 if(flag){ clearinterval(obj.timer); if(fn){ fn(); } } },13); } /** *函数作用:返回样式属性值 *接受参数:obj(需要获取属性的dom元素) * attr(需要获取的属性名称) */ function getstyle(obj,attr) { if(obj.currentstyle) { return obj.currentstyle[attr];//ie兼容 } else { return getcomputedstyle(obj,false)[attr]; } } </script> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!