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动画,实现背 ...
随机推荐
- UESTC 771 最大容积（前缀后缀和）
题目链接:http://acm.uestc.edu.cn/#/problem/show/771 最大容积 Time Limit: 3000/1000MS (Java/Others) Memor ...
- mssql数据库syscolumns表中xtype列
xtype 类型34 image35 text36 uniqueidentifier48 tinyint52 smallint56 int58 smalldatetime59 real60 mo ...
- iOS下bound，center和frame
本文转发至:http://www.xuebuyuan.com/1846606.html 在写程序的时候发现,iOS下的坐标.位置很容易弄乱,特别是在不同的坐标系统中,必须完成弄明白一些概念才能做相应的 ...
- openlayers画图形返回范围
//画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...
- 静态方法List
public class Country { public static List<Country> CountryList = new List<Country> { new ...
- java调用C/C++写的dll（转）
源:java调用C/C++写的dll Java语言本身具有跨平台性,如果通过Java调用DLL的技术方便易用,使用Java开发前台界面可以更快速,也能带来跨平台性. Java调用C/C++写好的DLL ...
- STM8建立IAR工程
STM8是意法半导体公司出的增强型八位单片机,性能比51单片机强大,而且价格便宜,在商业应用中很受欢迎 在STM8的开发工程中主要有两种开发工具链.第一是使用IAR开发环境,第二十使用cosmic+s ...
- java学习(三) java 中 mongodb的各种操作
一. 常用查询: 1. 查询一条数据:(多用于保存时判断db中是否已有当前数据,这里 is 精确匹配,模糊匹配 使用 regex...) public PageUrl getByUrl(String ...
- mongodb 查询时没有索引报错(too much data for sort() with no index)
报错信息: .... too much data for sort() with no index.... 给对应排序字段加索引就OK 了... 在对应"表"名上,右键--> ...
- Node.js timer的优化故事
前几天nodejs发布了新版本4.0,其中涉及到一个更新比较多的模块,那就是下面要介绍的timer模块. timers: Improved timer performance from porting ...