Javascript 实现全屏滚动实例代码


Posted in Javascript onDecember 31, 2016

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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
js逆向解密之网络爬虫
May 30 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
javascript 闭包详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs中的$resource服务
Dec 31 #Javascript
BootStrap Fileinput的使用教程
Dec 30 #Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 #Javascript
bootstrapValidator表单验证插件学习
Dec 30 #Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
You might like
phpstrom使用xdebug配置方法
2013/12/17 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python黑魔法之参数传递
2016/02/12 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python文字转语音的实例代码分析
2019/11/12 Python
容易被忽略的Python内置类型
2020/09/03 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
春节超市活动方案
2014/08/14 职场文书
一般党员对照检查材料
2014/09/24 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
经验交流材料格式
2014/12/30 职场文书
党员带头倡议书
2015/04/29 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL