帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 页面多屏滚动效果
页面多屏滚动效果
浏览:1737次
-
评论:0次
-
发布时间:2018-11-16
Html
Css
Js
屏幕1
屏幕2
屏幕3
屏幕4
屏幕5
1
2
3
4
5
* { margin:0; padding:0; } html,body { width:100%; height:100%; overflow:hidden; } .big-box { width:100%; height:500%; text-align:center; position:absolute; } .big-box .item { height:20%; } .big-box .item1 { background-color:red; } .big-box .item2 { background-color:blue; } .big-box .item3 { background-color:purple; } .big-box .item4 { background-color:gold; } .big-box .item5 { background-color:pink; } .controls { list-style:none; position:absolute; top:20%; right:20px; } .controls li { width:50px; height:50px; font:bold 22px/50px "宋体"; text-align:center; background-color:#000; color:#fff; cursor:pointer; } .controls li+li { margin-top:5px; } .controls li.active { background-color:#fff; color:red; }
/* 思路: 第一步:当页面加载完后,获取所要操作的节对象 第二步:为document添加一个滚轮滚动事件 第三步:滚轮滚动切换 获取当前浏览器可视区域的高度 var viewHeight = document.body.clientHeight 滚轮切换的目的:就是更改bigBox的top值 top:最大0 top:最小 viewHeight*-4 从上到下或从下到上:最多走4次(5个页面) 每一次走viewHeight 控制的关键点:索引 定一个索引 2 滚轮↓ 索引+1 滚轮↑ 索引-1 bigBox.style.top = -索引*viewHeihgt */ var bigBox = document.getElementById("bigBox"); //获取bigBox节点对象 var lis = document.querySelectorAll(".controls li"); //获取所有的li节点对象 var viewHeight = document.body.clientHeight; //获取当前页面高度 var flag = true; //设置开关 var index = 0; //设置索引 //封装事件,兼容浏览器 function on(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn); } else { obj.attachEvent("on" + eventType, fn); } } //鼠标滚动事件处理函数 function handler(e) { var _e = window.event || e; if (flag) { flag = false; if (_e.wheelDelta == 120 || _e.detail == -3) { //如果鼠标滚轮向上滚动,detail为火狐判断条件 index--; if (index < 0) { index = 0; } } else { //向下滚动 index++; if (index > lis.length - 1) { //如果索引大于页面数,就是滚到最后一张页面时,再滚动鼠标页面不再滚动 index = lis.length - 1; } } bigBox.style.top = -index * viewHeight + "px"; //bigBox整体上移index个页面 for (var i = 0; i < lis.length; i++) { lis[i].className = ""; //重置全部li的类 } lis[index].className = "active"; //设置当前li的类名 setTimeout(function() { //页面滚动间隔一秒,防止滚动太快 flag = true; //重新开启开关 }, 1000); } } on(document, "mousewheel", handler); //滚轮滚动事件 on(document, "DOMMouseScroll", handler); //滚轮滚动事件,适配火狐浏览器 //数字标签点击处理 for (var i = 0; i < lis.length; i++) { lis[i].tag = i; lis[i].onclick = function() { for (var j = 0; j < lis.length; j++) { lis[j].className = ""; } lis[this.tag].className = "active"; bigBox.style.top = -this.tag * viewHeight + "px"; } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>页面多屏滚动效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:全屏滚动切换,代码简单清楚
CSS3的bderimage设计多彩边框效果
动态下拉框多选效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1737
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值