javascript实现页面滚屏效果
当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。
这是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技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
利用JavaScript脚本实现滚屏效果的方法
许多制作网页的朋友常常制作公告板.信息窗,也经常为了实现整版页面和图像的滚屏显示而烦恼,不用着急,这里有一个简单的方法来实现滚屏显示.我们没有采用Java的.class程序来实现,也不是动态DHTML语言,只是充分地利用了JavaScript脚本语言的一些函数,写一些简短的JavaScript脚本语言就可实现这一功能. 原代码如下: <html> <head> <script language="Javascript"> <!--//防止错误显
-
javascript实现页面滚屏效果
当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换.笔者未对页面的平稳滚动进行实现,读者可自行试验研究. 这是html代码: <!doctype html> <html> <head> <meta charset="UTF-8
-
jQuery实现公告新闻自动滚屏效果实例代码
本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti
-
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT
-
JavaScript编写页面半透明遮罩效果的简单示例
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助 <div > <h4><span>现在注册</span><span >关闭</span></h4> <p> <label> 用户名</label> <input type="text" class="myin
-
JavaScript实现页面无缝滚动效果
目前我只使用两种方式,如果还有其他方式,希望推荐一下. 1.js+transform使用定时器动态增加大小,再把值赋给 transform,实现位置偏移,来实现无缝滚动. html一定要循环两遍数据,这样的话,会出现两个一样的数据,在一个数据消失后,不会使页面空白,而这时transform归0,有从头开始,因为两个数据相同,归0后视觉上就像无缝滚动. <div style="height: 100%" @mouseenter="moveStar()" @mou
-
基于JavaScript实现全屏透明遮罩div层锁屏效果
废话不多说了,直接给大家写js代码了,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
-
JQuery移动页面开发之屏幕方向改变与滚屏的实现
方向改变事件(orientationchange) 当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape".这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式.注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件. 手持设备方向改变时执行 $(window).bind( 'or
-
基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下 效果图: <html> <head> <title>正在载入</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF"
-
使用 JavaScript 制作页面效果
十一.使用 JavaScript 制作页面效果 11.1 DOM 编程 DOM 编程(Document Object Model)文档对象模型 在 DOM 编程中,把整个页面看成一个 document 对象,其中的 html 元素为具体对象,在 DOM 中的核心在于找到相对应的 HTML 元素对象,然后对进行操作(属性或样式的修改)还可以生成新的 HTML 元素对象 11.2 在 JS 查找页面中的元素 通过表单的 name 包含关系找到对象:document.calForm.num1 通过 H