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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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的日期与时间函数技巧
2008/04/24 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
利用Python开发实现简单的记事本
2016/11/15 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python中函数的返回值示例浅析
2019/08/28 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
中学生获奖感言
2014/02/04 职场文书
户外婚礼策划方案
2014/02/08 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Python list列表删除元素的4种方法
2021/11/01 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技