想知道此网页的图片之间的切换效果思路是什么样的

王康伯巴奇 2019-01-03 07:16:24
http://www.luiskonrad.com/#hello

如上网页,在拉进度条/滚动滚轮时能看到他页面上的切换,楼主期末h5作业要交一个网页,想学习这个网页的切换效果,不图代码,就想了解一下这个切换效果的思路是什么样的
...全文
267 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
一只ju 2019-01-06
  • 打赏
  • 举报
回复
我自己试过可以用的应该
王康伯巴奇 2019-01-04
  • 打赏
  • 举报
回复
引用 1 楼 一只ju 的回复:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现一次滚动一屏</title> <style> html,body{ height: 100%; } body{ margin: 0; } div{ height: 100%; } </style> </head> <body> <div style="background-color: #1b6d85"> <div>这是第1屏</div> </div> <div style="background-color: #5cb85c"> <div>这是第2屏</div> </div> <div style="background-color: #8a6d3b"> <div>这是第3屏</div> </div> <div style="background-color: #337ab7"> <div>这是第4屏</div> </div> <div style="background-color: #66512c"> <div>这是第5屏</div> </div> </body> <script> document.addEventListener("DOMContentLoaded",function () { var body = document.body; var html = document.documentElement; var itv,height = document.body.offsetHeight; var page = scrollTop() / height | 0; addEventListener("resize",onresize,false); onresize(); //鼠标滚轮事件 document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel",function (e) { clearTimeout(itv); itv = setTimeout(function () { //判断滚轮滚的方向 var delta = e.wheelDelta / 120 || -e.deltaY / 3; page -= delta; var max = (document.body.scrollHeight / height | 0) -1; if (page < 0){ return page = 0; } if (page > max){ return page = max; } move(); },100); e.preventDefault(); }); //当窗体发生变化时还是保证每次滚动滚一屏 function onresize() { height = body.offsetHeight; move(); }; function move() { var value = height * page; var diff = scrollTop() - value; (function callee() { diff = diff / 1.2 | 0; scrollTop(value + diff); if (diff){ itv = setTimeout(callee,16); } })(); }; function scrollTop(v) { if (v == null){ return Math.max(body.scrollTop,html.scrollTop); }else{ body.scrollTop = html.scrollTop = v; } } }) </script> </html>
感谢!明日回学校去试试
一只ju 2019-01-04
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现一次滚动一屏</title>
<style>
html,body{
height: 100%;
}
body{
margin: 0;
}
div{
height: 100%;
}
</style>
</head>
<body>
<div style="background-color: #1b6d85">
<div>这是第1屏</div>
</div>
<div style="background-color: #5cb85c">
<div>这是第2屏</div>
</div>
<div style="background-color: #8a6d3b">
<div>这是第3屏</div>
</div>
<div style="background-color: #337ab7">
<div>这是第4屏</div>
</div>
<div style="background-color: #66512c">
<div>这是第5屏</div>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded",function () {
var body = document.body;
var html = document.documentElement;
var itv,height = document.body.offsetHeight;
var page = scrollTop() / height | 0;
addEventListener("resize",onresize,false);
onresize();

//鼠标滚轮事件
document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel",function (e) {
clearTimeout(itv);
itv = setTimeout(function () {
//判断滚轮滚的方向
var delta = e.wheelDelta / 120 || -e.deltaY / 3;
page -= delta;
var max = (document.body.scrollHeight / height | 0) -1;
if (page < 0){
return page = 0;
}
if (page > max){
return page = max;
}
move();
},100);
e.preventDefault();
});
//当窗体发生变化时还是保证每次滚动滚一屏
function onresize() {
height = body.offsetHeight;
move();
};

function move() {
var value = height * page;
var diff = scrollTop() - value;
(function callee() {
diff = diff / 1.2 | 0;
scrollTop(value + diff);
if (diff){
itv = setTimeout(callee,16);
}
})();
};

function scrollTop(v) {
if (v == null){
return Math.max(body.scrollTop,html.scrollTop);
}else{
body.scrollTop = html.scrollTop = v;
}
}
})
</script>
</html>

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧