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:; padding:;}
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实现页面滚屏效果的更多相关文章
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
- 帆软报表（finereport）实现自动滚屏效果
例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...
- FineReport中如何实现自动滚屏效果
对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在F ...
- jquery实现自动滚屏效果，适用用公告新闻等滚屏
从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> ...
- js实现双击滚屏效果
<body onDblClick="s=setInterval('scrollBy(0,2)',50)" onMousedown="clearInterval(s) ...
- 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果
参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */
- js手机滚屏效果
原文地址:https://github.com/yanhaijing/zepto.fullpage 第一步:基于移动端的浏览体验,在头部添加浏览器渲染的分辨率 <meta name=" ...
- Python+moviepy音视频剪辑：视频帧数据的本质、Clip的fl方法进行变换处理的原理以及滚屏案例
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇02：滚屏》
2.滚屏 滚屏概述: 打飞机游戏场景背景设计通常很简单,因为角色敌人道具等都不与背景发生交互事件.开发者只需要根据设定的游戏类型,为游戏制作背景,模拟一个大环境即可. 滚屏原理: 材质UV动画,实现背 ...
随机推荐
- 对STM32的NVIC_PriorityGroupConfig使用及优先级分组方式理解(转)
源:http://blog.chinaunix.net/uid-22670933-id-3443085.html STM32有43个channel的settable的中断源:AIRC(Applicat ...
- Netbeans 6.8 + apktool_2.0.0b9 动态调试smali文件
前言 很早就知道用Netbeans能够单步调试smali,一直拖到现在才真正的自己实现了一次~ 下面是详细步骤! 0×1 环境及工具 a.apktool_2.0.0b9 下载地址:http://con ...
- Express 简介
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
- [iOS]C语言知识点系列视频
C语言知识点系列视频 目录 C语言技术视频-01-变量的定义 C语言技术视频-02-程序分支结构(if...else) C语言技术视频-03-程序分支结构(switch) C语言技术视频-04-程序循 ...
- [iOS Animation]-CALayer 图层几何学
图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...
- window.location.href 和 document.location.href
document表示的是一个文档对象,window表示的是一个窗口对象,一个窗口下可以有多个文档对象. 所以一个窗口下只有一个window.location.href,但是可能有多个document. ...
- ZOJ 3930 Dice Notation
简单模拟题.一个int写成了char,搞了4个多小时.真垃圾.. #include<stdio.h> #include<string.h> +],s[+]; +]; +]; i ...
- 10、手把手教你Extjs5（十）自定义模块的设计
从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...
- laravel5 html引用问题
1. Composer 安装 编辑 composer.json 文件, require 节点下增加: "illuminate/html": "~5.0" 然后 ...
- bzoj 4002: [JLOI2015]有意义的字符串
这个题... #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i <= b; i++) #define d ...