JS——scroll动画
固定导航栏
1、计算导航栏到顶部的距离值
2、当scrollTop值大于这个距离值就添加定位，当小于距离值后解除定位
注意事项：当导航栏添加定位之后，导航栏就脱离了文档流，也就是不占位了，下面的盒子就会顶上来，所以要给下面盒子添加padding-top值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
height: 5000px;
} .box1 {
height: 40px;
background-color: pink;
overflow: hidden;
} .box2 {
height: 50px;
background-color: yellow;
font: 500 20px/50px "simsun";
text-align: center;
} .box3 {
width: 820px;
height: 512px;
margin: 10px auto;
} .fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">导航栏</div>
<div class="box3">
<img src="data:images/nba.jpg">
</div>
<script>
var banner = document.getElementsByTagName("div")[0];
var nav = document.getElementsByTagName("div")[1];
var lastDiv = document.getElementsByTagName("div")[2];
window.onscroll = function () {
if (scroll().top >= banner.offsetHeight) {
nav.className = "box2 fixed";
lastDiv.style.paddingTop = nav.offsetHeight + "px";
} else {
nav.className = "box2";
lastDiv.style.paddingTop = "0px";
}
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
两侧跟随广告
1、之前都是offsetLeft计算x轴上的移动，现在是计算y轴方向的移动
2、鼠标滚动之后，遮盖的距离scrollTop值，需要和广告之前的定位Top值进行相加才是滚动的真正目标值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
height: 5000px;
} .box1 {
width: 800px;
margin: 50px auto;
font: 500 25px/45px "simsun";
color: red;
text-align: center;
} span {
position: absolute;
top: 300px;
width: 40px;
height: 120px;
background: rgba(255, 142, 142, 0.3);
font: 600 30px/60px "simsun";
color: red;
text-align: center;
} .ad-left {
left: 400px;
} .ad-right {
right: 400px;
}
</style>
</head>
<body>
<span class="ad-left">广<br>告</span>
<span class="ad-right">广<br>告</span>
<div class="box1">
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
</div>
<script>
var sp1 = document.getElementsByTagName("span")[0];
var sp2 = document.getElementsByTagName("span")[1]; window.onscroll = function () {
animate(sp1, scroll().top + 300);
animate(sp2, scroll().top + 300);
} function animate(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target - ele.offsetTop) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
ele.style.top = ele.offsetTop + step + "px";
if (Math.abs(target - ele.offsetTop) <= Math.abs(step)) {
ele.style.top = target + "px";
clearInterval(ele.timer);
}
}, 15);
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
回到顶部
1、技术点：window.scrollTo(x,y)，之前都是移动某个元素，现在是需要移动整个显示区域，所以用window.scrollTo(x,y)
2、浏览器显示区域已经滚动的距离其实就是scrollTop值，做缓动画，只需要将这个值慢慢变小，一直到0即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
height: 5000px;
} .box1 {
width: 800px;
margin: 50px auto;
font: 500 25px/45px "simsun";
color: red;
text-align: center;
} span {
position: fixed;
bottom: 30px;
right: 30px;
width: 40px;
height: 120px;
background: rgba(255, 142, 142, 0.3);
font: 600 30px/30px "simsun";
color: red;
text-align: center;
display: none;
} </style>
</head>
<body>
<span>回<br>到<br>顶<br>部</span>
<div class="box1">
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>
</div>
<script>
var sp = document.getElementsByTagName("span")[0];
var target = 0;//目标位置
var leader = 0;//显示区域自身的位置
window.onscroll = function () {
if (scroll().top > 400) {
sp.style.display = "block";
} else {
sp.style.display = "none";
}
leader = scroll().top;
}
var timer = null;
sp.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
window.scrollTo(0, leader);
if (Math.abs(target - leader) <= Math.abs(step)) {
window.scrollTo(0, 0);
clearInterval(timer);
} }, 15);
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
楼层跨越
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} body {
height: 5000px;
} ul {
width: 800px;
margin: 0 auto;
} ul li {
height: 400px;
} ol {
position: fixed;
top: 150px;
left: 350px;
} ol li {
width: 50px;
height: 50px;
font: 500 15px/50px "simsun";
text-align: center;
border: 1px solid #ccc;
margin-top: -1px;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>上衣</li>
<li>下衣</li>
<li>春天</li>
<li>夏衣</li>
<li>秋衣</li>
<li>冬衣</li>
</ul>
<ol>
<li>上衣</li>
<li>下衣</li>
<li>春天</li>
<li>夏衣</li>
<li>秋衣</li>
<li>冬衣</li>
</ol>
<script>
var ul = document.getElementsByTagName("ul")[0];
var uLiArr = ul.children;
var ol = document.getElementsByTagName("ol")[0];
var oLiArr = ol.children;
var arrColor = ["pink", "blue", "yellow", "orange", "green", "red"];
var timer = null;
var dispalyArea = 0;//显示区域坐标
var target = 0;//目标值
for (var i = 0; i < arrColor.length; i++) {
uLiArr[i].style.backgroundColor = arrColor[i];
oLiArr[i].style.backgroundColor = arrColor[i];
oLiArr[i].index = uLiArr[i].offsetTop;
//显示区域的scrollTop值与目标的scrollTop值差值
oLiArr[i].onclick = function () {
target = this.index;
clearInterval(timer);
timer = setInterval(function () {
var step = (target - dispalyArea) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
dispalyArea = dispalyArea + step;
window.scrollTo(0, dispalyArea);
if (Math.abs(target - dispalyArea) <= Math.abs(step)) {
clearInterval(timer);
window.scrollTo(0, target);
}
}, 15);
}
}
window.onscroll = function () {
dispalyArea = scroll().top;
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
JS——scroll动画的更多相关文章
- js scroll动画
知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置 scroll scroll:卷动意思(书卷) 从上到下移动 1.window.onscroll 窗口滚动事件 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...
随机推荐
- 2.2 convex hull凸包
1.定义:一组平面上的点,求一个包含所有点的最小的凸多边形,就是凸包问题. 利用编程解决凸包问题,应该得到一组逆时针的顶点的顺序集合,在边上但不是顶点,则不包含在集合里. 2.机械的方法:将点所在的位 ...
- HDU——1130 How Many Trees?
How Many Trees? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 【python】字符遍历
Python为我们提供了很多便捷的方式去遍历一个字符串中的字符.比如,将一个字符串转换为一个字符数组(列表): theList = list(theString) 同时,我们可以方便的通过for语句进 ...
- Username is not in the sudoers file. This incident will be reported
type sudo adduser <username> sudo where username is the name of the user you want to add in th ...
- 关于new和malloc以及delete和free能否够混用
/* *1>当申请的空间是内置类型时,delete和free能够混用 *2>当申请的空间是自己定义类型时, * 1>若没有析构函数.delete和malloc能够混用.有 ...
- Eclipse下单个文件中文乱码问题
有时候用eclipse打开单个文件,会出现中文乱码问题. 这时可以点菜单栏 Edit -> Set Encoding,Other:UTF-8,通常可以解决问题.
- 【转】关于使用Android6.0编译程序时，出现getSlotFromBufferLocked: unknown buffer: 0xac0f8650问题的解释
这个问题是在测试leakCanaryTestDemo时发现的,期初看到有点蒙,这个demo中只使用了一个button和一个textView控件进行测试,按理说是不应该出现这种问题,在 网上查找这个问题 ...
- bzoj1690
二分+分数规划+dfs判环 跟1486很像,但是我忘记怎么判环了, 我们可以写一个dfs,如果当前节点的距离小于更新的距离,而且这个点已经在当前访问过了,那么就是有环了,如果没有访问过就继续dfs,每 ...
- 特征选择--->卡方选择器
特征选择(Feature Selection)指的是在特征向量中选择出那些“优秀”的特征,组成新的.更“精简”的特征向量的过程.它在高维数据分析中十分常用,可以剔除掉“冗余”和“无关”的特征,提升学习 ...
- VB.NET学习体会
注:本文写于2018年01月28日,首先发表于CSDN博客"aopstudio的博客"上 下学期要学习VB.NET程序设计课程,这几天在家开始自习.在自习的过程中发现VB.NET和 ...