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代码实现无缝滚动(文字和图片)
Aug 20 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
物业经理自我鉴定
2014/03/03 职场文书
学生评语大全
2014/04/18 职场文书
新课培训心得体会
2014/09/03 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
改进工作作风心得体会
2016/01/23 职场文书