当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换。笔者未对页面的平稳滚动进行实现,读者可自行试验研究。

这是html代码:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="big-box" id="bigBox"> <div class="item item1"><h1>屏幕1</h1></div> <div class="item item2"><h1>屏幕2</h1></div> <div class="item item3"><h1>屏幕3</h1></div> <div class="item item4"><h1>屏幕4</h1></div> <div class="item item5"><h1>屏幕5</h1></div> </div> <ul class="controls"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script src="behavior.js"></script> </body> </html>
这里是css结构代码:
*{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;
}
这里是JavaScript代码:
/*
思路:
第一步:当页面加载完后,获取所要操作的节对象
第二步:为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";
}
}
笔者在这里进行了html,css和javascript的分离,读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明,方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现,纯javascript技术,效果稍欠人意,读者可自行学习,对这一技术进行完美实现。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
# js
# 滚屏
# 利用JavaScript脚本实现滚屏效果的方法
# 鼠标
# 这一
# 在这里
# 火狐
# 进行了
# 这是
# 也在
# 可以实现
# 当我们
# 所要
# 太快
# 第二步
# 完后
# 第三步
# 切换到
# 宋体
# 浏览网页
# 未对
# 从上到下
相关文章:
如何在阿里云香港服务器快速搭建网站?
成都响应式网站开发,dw怎么把手机适应页面变成网页?
重庆市网站制作公司,重庆招聘网站哪个好?
Swift中switch语句区间和元组模式匹配
公司门户网站制作流程,华为官网怎么做?
如何高效搭建专业期货交易平台网站?
高端建站如何打造兼具美学与转化的品牌官网?
如何在万网自助建站平台快速创建网站?
宝华建站服务条款解析:五站合一功能与SEO优化设置指南
c# 服务器GC和工作站GC的区别和设置
如何用AWS免费套餐快速搭建高效网站?
网站制作培训多少钱一个月,网站优化seo培训课程有哪些?
如何通过商城免费建站系统源码自定义网站主题?
天津个人网站制作公司,天津网约车驾驶员从业资格证官网?
建站之星代理费用多少?最新价格详情介绍
建站之星收费标准详解:套餐费用及年费价格表一览
建站之星如何助力企业快速打造五合一网站?
临沂网站制作企业,临沂第三中学官方网站?
Python如何创建带属性的XML节点
如何通过服务器快速搭建网站?完整步骤解析
免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面,最好是免费的?
javascript中的try catch异常捕获机制用法分析
宝盒自助建站智能生成技巧:SEO优化与关键词设置指南
用v-html解决Vue.js渲染中html标签不被解析的问题
C++如何将C风格字符串(char*)转换为std::string?(代码示例)
在线ppt制作网站有哪些,请推荐几个好的课件下载的网站?
建站之星云端配置指南:模板选择与SEO优化一键生成
制作网站的模板软件,网站怎么建设?
怎么将XML数据可视化 D3.js加载XML
建站DNS解析失败?如何正确配置域名服务器?
制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事?
如何在Golang中处理模块冲突_解决依赖版本不兼容问题
如何用虚拟主机快速搭建网站?详细步骤解析
制作网站的基本流程,设计网站的软件是什么?
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
如何通过万网虚拟主机快速搭建网站?
网站制作话术技巧,网站推广做的好怎么话术?
如何在阿里云虚拟服务器快速搭建网站?
详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)
如何确保FTP站点访问权限与数据传输安全?
GML (Geography Markup Language)是什么,它如何用XML来表示地理空间信息?
阿里云高弹*务器配置方案|支持分布式架构与多节点部署
网站代码制作软件有哪些,如何生成自己网站的代码?
公司网站制作价格怎么算,公司办个官网需要多少钱?
焦点电影公司作品,电影焦点结局是什么?
建站之星好吗?新手能否轻松上手建站?
建站之星免费版是否永久可用?
岳西云建站教程与模板下载_一站式快速建站系统操作指南
模具网站制作流程,如何找模具客户?
如何用腾讯建站主机快速创建免费网站?
*请认真填写需求信息,我们会在24小时内与您取得联系。