信息发布软件,b2b软件,广告发布软件

标题: JavaScript想怎么滚动就可以往哪个方向滚屏了 [打印本页]
作者: 群发软件    时间: 2017-6-9 23:26
标题: 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.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平台上调试通过。
　　简单吗？赶快去试试吧。

作者: aluoting    时间: 2017-6-11 07:31
常好，技术也好，以后有问题就选这家了，支持
作者: 1124789174    时间: 2017-6-14 04:42
亮，也很专业，弄起来以后果然就是不一样，速度也很快，有效率，满意
作者: 紫逸风    时间: 2017-6-19 10:23
这次合作，整个过程很顺利，今后我的店铺还是会请你帮我装修，希望越来越好
作者: asz111    时间: 2017-6-20 12:44
评，客服态度也特别好，077号笨蛋棒棒哒???
作者: mm5216299    时间: 2017-6-23 03:30
，就是客服回复速度太慢，有时候问个信息竟然没人回
作者: c19900420    时间: 2017-6-23 05:01
我想要的，希望生意越来越好
作者: niubttt    时间: 2017-6-26 20:44
的，还不错
作者: zdxhz    时间: 2017-7-3 08:00
了，产品功能强大，很多客户都说我们这种方式方便，整体满意，卖家人好，超有耐心，点个赞
作者: chenzhanhua    时间: 2017-7-3 21:36
绍朋友来的，有没有提成啊，哈哈
作者: dccmdy    时间: 2017-7-6 18:48
好，物流快
作者: c19900420    时间: 2017-7-8 09:18
高大上了，服务很周到，能达到我想要的效果，设计后生意越来越好了！好开心啊！



欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://postbbs.com/) Powered by Discuz! X3.2