jquery实现全屏滚动效果
本文实例为大家分享了jquery实现全屏滚动的具体代码，供大家参考，具体内容如下
效果图
思路
1.要全屏,给父级、body、html、高度设置为100%，自己的宽度也100%，还要给html、body设置溢出隐藏
html,body{
height:100%;
/* 实现全屏 */
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* 实现全屏 */
height: 100%;
}
div.wrap>div{
width:100%;height:100%;
}
2.引入mousewheel在引入min.js之后
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
3.e.deltaY>0上滑 e.deltaY<0下滑
4.控制滑动一次
<script>
var flag = true;
if(flag){
//上滑
if(e.deltaY>0){
flag = false;
}
//下滑
else{
flag = false;
}
</script>
5.让他滑起来,应该改变父级(这里是wrap的top,不是document的top,刚刚开始思路错了，他的高度应该是子级的高度*-1)，注意应该是每次滑完了才能继续滑动，所以function里面要写flag=true,为了让它不越界，要把上滑和下滑写在一个if里面，看下代码
<script>
// 控制滑动一次
if(flag){
// 上滑
if(e.deltaY>0){
// 不能上滑了
if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}//下滑
else{
// 这个if让它不能让下继续滑动
if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}
}
</script>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* 实现全屏 */
html,body{
height:100%;
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* 实现全屏 */
height: 100%;
}
div.wrap>div{
width:100%;
height:100%;
}
div.one{
background:lightcoral;
}
div.two{
background:lightblue;
}
div.three{
background:lightseagreen;
}
div.four{
background:lightslategray;
}
div.five{
background:pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
<script>
$(function(){
var flag = true;
var i=0;
var hei=$('.wrap>div').first().height();
$(document).mousewheel(function(e){
// 控制滑动一次
if(flag){
// 上滑
if(e.deltaY>0){
// 不能上滑了
if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}//下滑
else{
// 这个if让它不能让下继续滑动
if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}
}
})
})
</script>
</body>
</html>
总结:
1.top去实现
2.记到overflow
3.上滑的top依然是负数，不是正数
4.高度和宽度要设置为100%
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示 的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue
-
基于jquery实现全屏滚动效果
那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用.功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放.旋转以产生各种各样的动画效果.同时它还支持 fullPage.js 所没有的水平滚动. 兼容桌面端(ie5.5+) 和 手机端 你可以用它来构建你的个人主页或者网页应用 这是一个不使用jQuery小巧的框架 不到9KB 再介绍之前先看一
-
jquery实现全屏滚动
在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1.js动态获取屏幕的高度. 获取屏幕的高度,设置每一屏幕的高度. 2.监听mousewheel事件. 监听mousewheel事件,并判断滚轮的方向,向上或向下滚动一屏. 二.jQuery插件fullpages介绍 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平
-
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')
-
jquery实现全屏滚动效果
本文实例为大家分享了jquery实现全屏滚动的具体代码,供大家参考,具体内容如下 效果图 思路 1.要全屏,给父级.body.html.高度设置为100%,自己的宽度也100%,还要给html.body设置溢出隐藏 html,body{ height:100%; /* 实现全屏 */ overflow: hidden; } .wrap{ position: relative; top: 0; left: 0; /* 实现全屏 */ height: 100%; } div.wrap>div{ wi
-
微信小程序功能之全屏滚动效果的实现代码
想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu
-
vue实现全屏滚动效果（非fullpage.js）
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下 是什么 网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起.当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面. 此次只实现鼠标滚动 实现原理 使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <template> <div class=&qu
-
fullPage.js和CSS3实现全屏滚动效果
首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件.首先先展示一下基本的效果图. 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换. 第一屏是用一个图片,其他的三屏都是由左侧的三个图片和右侧的两个图片组成的. 这三屏左侧的图片展开方式不同,所以就更有炫酷的效果. 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置. 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置.
-
用ES6写全屏滚动插件的示例代码
这篇文章将介绍如何使用原生 JS (主要使用 ES6 语法)实现全屏滚动插件,兼容 IE 10+.手机触屏,Mac 触摸板优化,支持自定义页面动画,压缩后 gzip 文件只有 2k.完整源码在这 pure_full_page,点这查看demo. 1)前面的话 现在已经有很多全屏滚动插件了,比如著名的 fullPage ,那为什么还要自己造轮子呢? 现有轮子有以下问题: 首先,最大的问题是最流行的几个插件都依赖 jQuery,这意味着在使用 React 或者 Vue 的项目中使用他们是一件十分蛋疼
-
jquery左右全屏大尺寸多图滑动效果代码分享
本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换