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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
validform表单验证的实现方法
Mar 08 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
python创建线程示例
2014/05/06 Python
Python中正则表达式详解
2017/05/17 Python
python绘制中国大陆人口热力图
2018/11/07 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Ibatis如何使用动态表名
2015/07/12 面试题
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
英语系本科生求职信范文
2013/12/18 职场文书
计划生育证明书写要求
2014/09/17 职场文书
司机岗位职责
2015/02/04 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis