重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换。笔者未对页面的平稳滚动进行实现,读者可自行试验研究。
在舒兰等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站设计、成都外贸网站建设 网站设计制作定制网站建设,公司网站建设,企业网站建设,品牌网站设计,全网营销推广,外贸网站制作,舒兰网站建设费用合理。
这是html代码:
Document 屏幕1
屏幕2
屏幕3
屏幕4
屏幕5
这里是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
笔者在这里进行了html,css和javascript的分离,读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明,方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现,纯javascript技术,效果稍欠人意,读者可自行学习,对这一技术进行完美实现。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!