网页一次滚动一屏幕效果

复制代码即可用，可根据注释按需求修改

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><title></title><!--@time: 2018-08-04@version: 0.0.1@author: Mortal--><style type="text/css">/** 说明：* 标注为慎删的属性暂时认定可以删除，即在作者测试的环境下删除暂时没有影响，但不代表所有环境下删除都没有影响* 其他属性一概不可以删除*/html,body {height: 100%;}body,ul,li,a,p,div {/*慎删*/padding: 0px;margin: 0px;}#wrap {overflow: hidden;width: 100%;}#main {top: 0;position: relative;}.page {/*谨删*/width: 100%;margin: 0;}#pageUl {position: fixed;right: 10px;}</style>
</head><body><!--每个全屏页面div的class为page，其中的图片的class为pageImgul为右侧的导航栏pageUlLi和page的数目必须相等，修改数目时还应修改最下面js鼠标悬停的跳转代码--><div id="wrap"><div id="main"><ul id="pageUl" type="circle"><li id="pageUlLi1" class="pageUlLi" style="color: red;">&nbsp;</li><li id="pageUlLi2" class="pageUlLi">&nbsp;</li><li id="pageUlLi3" class="pageUlLi">&nbsp;</li><li id="pageUlLi4" class="pageUlLi">&nbsp;</li><li id="pageUlLi5" class="pageUlLi">&nbsp;</li></ul><div style="background-color: #1b6d85" id="page1" class="page"></div><div style="background-color: #5cb85c" id="page2" class="page"></div><div style="background-color: #8a6d3b" id="page3" class="page"></div><div style="background-color: #337ab7" id="page4" class="page"></div><div style="background-color: #66512c" id="page5" class="page"></div></div></div>
</body>
<script type="text/javascript">//改变窗口大小时调整图片大小window.onload = resizeImages;window.onresize = resizeImages;function resizeImages() {$(function (e) {var screenWeight = document.documentElement.clientWidth;var screenHeight = document.documentElement.clientHeight;$("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);$("#pageUl").css("bottom", screenHeight >> 1);});}var index = 1;var curIndex = 1;var wrap = document.getElementById("wrap");var main = document.getElementById("main");var hei = document.body.clientHeight;wrap.style.height = hei + "px";var obj = document.getElementsByTagName("div");for (var i = 0; i < obj.length; i++) {if (obj[i].className == 'page') {obj[i].style.height = hei + "px";}}var pageNum = document.querySelectorAll(".page").length;//如果不加时间控制，滚动会过度灵敏，一次翻好几屏var startTime = 0, //翻屏起始时间  endTime = 0,now = 0;//浏览器兼容      if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {document.addEventListener("DOMMouseScroll", scrollFun, false);} else if (document.addEventListener) {document.addEventListener("mousewheel", scrollFun, false);} else if (document.attachEvent) {document.attachEvent("onmousewheel", scrollFun);} else {document.onmousewheel = scrollFun;}//滚动事件处理函数function scrollFun(event) {startTime = new Date().getTime();var delta = event.detail || (-event.wheelDelta);//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动if ((endTime - startTime) < -1000) {if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {//向下滚动index++;toPage(index);}if (delta < 0 && parseInt(main.offsetTop) < 0) {//向上滚动index--;toPage(index);}endTime = new Date().getTime();} else {event.preventDefault();}}function toPage(index) {//jquery实现动画效果if(index!=curIndex){var delta=index - curIndex;now = now - delta * hei;        $("#main").animate({top: (now + 'px')}, 1000);curIndex = index;//更改列表的选中项$(".pageUlLi").css("color", "black");$("#pageUlLi" + index).css("color", "red");}}//鼠标悬停翻页document.getElementById("pageUlLi1").onmouseover = function () {toPage(1);}document.getElementById("pageUlLi2").onmouseover = function () {toPage(2);}document.getElementById("pageUlLi3").onmouseover = function () {toPage(3);}document.getElementById("pageUlLi4").onmouseover = function () {toPage(4);}document.getElementById("pageUlLi5").onmouseover = function () {toPage(5);}
</script></html>

网页一次滚动一屏幕效果相关推荐

仿猫扑网页下方状态栏效果代码网页状态栏显示滚动文字
网页状态栏显示滚动文字仿猫扑网页下方状态栏效果代码 <SCRIPT language="JavaScript"> <!-- function scrollit( ...
视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果: ...
HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
原链接:https://www.cnblogs.com/libaoli/p/5779629.html 作者:请叫我阿力这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方, ...
php右侧弹窗QQ客服,JavaScript_网页右侧悬浮滚动在线qq客服代码示例，网页右侧悬浮滚动QQ在线客服 - phpStudy...
网页右侧悬浮滚动在线qq客服代码示例网页右侧悬浮滚动QQ在线客服代码 function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEve ...
win11鼠标怎么在轮滑时只滚动一个屏幕 Windows11鼠标设置轮滑只滚动一个屏幕的步骤方法
Win11电脑怎么设置鼠标滑轮一次滚动一个屏幕?win11电脑浏览网页的时候,发现鼠标滚动网页的速度太快,想要一次滚动一页,该怎么操作呢?下面我们就来看看win11设置鼠标滚轮一次滚动一个屏幕的技巧. ...
html网页的说课稿,网页设计之滚动字幕说课稿
网页设计之滚动字幕说课稿更新时间:2017/2/9 0:35:00 浏览量:633 手机版 2015-2016学年第二学期 <网页设计之滚动字幕> 说课稿(公开课) 信息技术组:米 ...
python 滚动字幕_python 实现字幕动态滚动和等待效果
晚上看了些python实现动态字幕效果的文章,总会提到print函数的flush=True参数,还有os.system('cls')清屏,总是迷糊,并不能实现滚动屏幕效果.经过多方思索和查找,总结如下 ...
html滚动字幕图片,网页HTML代码滚动文字制作
讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性.以下是小编整理的网页HTML代码滚动文字制作,欢迎来阅读! 制作滚动文字通过本章前面的学习,读者已经能够很好地控制 ...
抽奖滚动效果 python_Python使用Tkinter实现滚动抽奖器效果
更多python教程请到: 菜鸟教程www.piaodoo.com 人人影视www.sfkyty.com 16影视www.591319.com 星辰影院www.591319.com 年底,抽奖这个话题 ...

网页一次滚动一屏幕效果

复制代码即可用，可根据注释按需求修改

网页一次滚动一屏幕效果相关推荐

最新文章

热门文章