当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。请看代码：
这是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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
这里是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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
这里是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
.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.tag = i; lis.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"; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
笔者在这里进行了html，css和javascript的分离，读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明，方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现，纯javascript技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。
许多制作网页的朋友常常制作公告板、信息窗，也经常为了实现整版页面和图像的滚屏显示而烦恼，不用着急，这里有一个简单的方法来实现滚屏显示。我们没有采用Java的.class程序来实现，也不是动态DHTML语言，只是充分地利用了JavaScript
脚本语言的一些函数，写一些简短的JavaScript脚本语言就可实现这一功能。
原代码如下：
<html>
<head>
<script language="Javascript">
<!--//防止错误显示
locate=0;
function my_scroller()
{
if (locate !=400 )
{
locate++;//值增加
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("my_scroller()",2);//控制滚动时间
timer;
}
}
-->
</script>
</head>
<body>
作者简介：<br><br>
崔同杰男<br><br>武警工程学院计算机中心<br><br>
张卫华男<br><br>武警工程学院研究生队<br><br><br><br><br>
<br><br><br><br><br><br>
联系地址：<br><br>
陕西西安武警工程学院计算机中心<br><br>崔同杰<br><br></body>
</html>
可以通过改动Locate的值来控制显示页面的长度(原代码为Locate!=400)；可修改“SetTimeout(“Scroller()”,2);”中的“2”来改变滚动速度。您可分别做一些调整试试。程序写完保存后需在PII+PWS4.0+IE5平台上调试通过。
简单吗？赶快去试试吧。
|( 京ICP备09078825号 )
发表于 2017-6-9 23:26:11
收藏
