javaScript动画2 scroll家族
Posted zhang_kk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript动画2 scroll家族相关的知识，希望对你有一定的参考价值。
三个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三个函数</title> </head> <body> <script> var num =1.5; console.log(Math.ceil(num));//向上取整 console.log(Math.floor(num));//最接近它的整数，它的值小于或等于这个浮点数 console.log(Math.round(num));//四舍五入 </script> </body> </html>
缓动动画体验
1、封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画体验()</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*left: 400px;*/
}
</style>
</head>
<body>
<button>运动到400</button>
<div></div>
<script>
var btn=document.getElementsByTagName("button")[0];
var div=document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
//调用定时器先清除定时器
clearInterval(timer);
timer = setInterval(function () {
var target = 400;
//缓动：如何缓动？步长越来越小
//公式：盒子位置=(目标位置-盒子为本身位置)/10
//最后十像素的时候都1像素1像素的向目标位置移动，就能够到达指定位置
var step = ( target - div.offsetLeft)/10;
//拓展：差值大于0的时候，向上取整，小于0的时候向下取整。
// var step = Math.ceil((400 - div.offsetLeft)/10);
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
console.log(step);
div.style.left = div.offsetLeft + step + "px";
if(Math.abs(0 - div.offsetLeft)<Math.abs(step)){
clearInterval(timer);
}
},30);
}
</script>
</body>
</html>
2、完整封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画体验()</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*left: 400px;*/
}
</style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>
<script>
var btn=document.getElementsByTagName("button");
var div=document.getElementsByTagName("div")[0];
// var timer = null;
btn[0].onclick = function () {
animate(div,200)
};
btn[1].onclick = function () {
animate(div,400)
};
//缓动动画封装
function animate(ele,target) {
//调用定时器先清除定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//缓动：如何缓动？步长越来越小
//公式：盒子位置=(目标位置-盒子为本身位置)/10
//最后十像素的时候都1像素1像素的向目标位置移动，就能够到达指定位置
var step = ( target - ele.offsetLeft)/10;
//拓展：差值大于0的时候，向上取整，小于0的时候向下取整。
// var step = Math.ceil((400 - div.offsetLeft)/10);
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if(Math.abs(target - ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target + "px";
clearInterval(ele.timer);
}
},30);
}
</script>
</body>
</html>
scrool方法的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 5000px;
width: 5000px;
}
</style>
</head>
<body>
<script>
//需求：封装一个兼容的scrool的方法
window.onscroll = function () {
// var json=scroll();
// console.log(json);
console.log(scroll().top);
console.log(scroll().left);
};
function scroll() {
//如果这个属性存在那么返回值应该是0-无穷大
//如果没有返回undefined
//只要不是undefined就可以调用
if(window.pageYOffset !== undefined){
// var json = {
// "top": window.pageYOffset,
// "left": window.pageXOffset
// };
// return json;
return {
"top": window.pageYOffset,
"left": window.pageXOffset
};
}else if(document.compatMode === "CSS1Compat"){
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
};
}else{
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
};
}
// return {
// "top": document.body.scrollTop || document.documentElement.scrollTop ||window.pageYOffset ,
// "left": document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
// };
}
</script>
</body>
</html>
案例-筋斗云
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 5000px; width: 5000px; } </style> </head> <body> <script> //需求：封装一个兼容的scrool的方法 window.onscroll = function () { // var json=scroll(); // console.log(json); console.log(scroll().top); console.log(scroll().left); }; function scroll() { //如果这个属性存在那么返回值应该是0-无穷大 //如果没有返回undefined //只要不是undefined就可以调用 if(window.pageYOffset !== undefined){ // var json = { // "top": window.pageYOffset, // "left": window.pageXOffset // }; // return json; return { "top": window.pageYOffset, "left": window.pageXOffset }; }else if(document.compatMode === "CSS1Compat"){ return { "top": document.documentElement.scrollTop, "left": document.documentElement.scrollLeft }; }else{ return { "top": document.body.scrollTop, "left": document.body.scrollLeft }; } // return { // "top": document.body.scrollTop || document.documentElement.scrollTop ||window.pageYOffset , // "left": document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset // }; } </script> </body> </html>
案例-导航栏固定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 0 auto; width: 1000px; margin-top: 10px; } #Q-nav1 { overflow: hidden; } .fixed { position: fixed; top: 0; left: 0; } </style> <!--引入工具js--> <script src="my.js"></script> <script> window.onload = function () { //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed //步骤： //1.老三步。 //2.判断 ，被卷曲的头部的大小 //3.满足条件添加类，否则删除类 //1.老三步。 var topDiv = document.getElementById("top"); var height = topDiv.offsetHeight; var middle = document.getElementById("Q-nav1"); var main = document.getElementById("main"); window.onscroll = function () { //被卷曲的头部的大小满足条件添加类，否则删除类 if(scroll().top >height){ //满足条件添加类 middle.className += " fixed"; //第二个盒子不占位置了，所以我们给第三个盒子一个padding，不出现盒子抖动 main.style.paddingTop = middle.offsetHeight+"px"; }else { //否则删除类 middle.className = ""; //清零 main.style.paddingTop = 0; } } //2.判断 ，被卷曲的头部的大小 //3.满足条件添加类，否则删除类 } </script> </head> <body> <div class="top" id="top"> <img src="images/top.png" alt=""/> </div> <div id="Q-nav1"> <img src="images/nav.png" alt=""/> </div> <div class="main" id="main"> <img src="images/main.png" alt=""/> </div> </body> </html>
/** * Created by andy on 2015/12/8. */ function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } } //缓动动画封装 function animate(ele,target) { clearInterval(ele.timer); ele.timer = setInterval(function () { var step = (target-ele.offsetLeft)/10; step = step>0?Math.ceil(step):Math.floor(step); ele.style.left = ele.offsetLeft + step + "px"; console.log(1); if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){ ele.style.left = target + "px"; clearInterval(ele.timer); } },18); }
返回顶部
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> img { position: fixed; bottom: 100px; right: 50px; cursor: pointer; display: none; border: 1px solid #000; } div { width: 1210px; margin: 100px auto; text-align: center; font: 500 26px/35px "simsun"; color: red; } </style> <script src="animate.js"></script> <script> //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。 //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。 //技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标 //步骤： //1.老三步 window.onload = function () { var img= document.getElementsByTagName("img")[0]; window.onscroll = function () { //2 备选区域大于200显示小火箭 if(scroll().top>200){ img.style.display = "block"; }else{ img.style.display = "none"; } //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离 leader=scroll().top; }; //3 缓动跳转到也看最顶端(利用我们的缓动动画) var timer = null; var target = 0;//目标位置 var leader=0;//屏幕显示区域自身的位置 window.onclick = function() { //技术点：window.scrollTo(0,0); window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标 //先清除定时器 clearInterval(timer); timer = setInterval(function () { //获取步长 var step = (target-leader)/10; //二次处理步长 setp = step>0?Math.ceil(step):Math.floor(step); leader = leader +step; //让显示区域移动 window.scrollTo(0,leader); //清除定时器 if(leader === 0){ clearInterval(timer); } },20) } } </script> </head> <body> <img src="images/Top.jpg"/> <div> 我是最顶端.....<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> 风吹马尾千条线，雨打羊毛一片毡.....<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> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> 风吹马尾千条线，雨打羊毛一片毡.....<br> </div> </body> </html>
//缓动动画封装 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"; console.log(1); if(Math.abs(target-ele.offsetTop)<Math.abs(step)){ ele.style.top = target + "px"; clearInterval(ele.timer); } },25); } /** * Created by andy on 2015/12/8. */ function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } } /** * Created by Lenovo on 2016/9/2. */ /** * 通过传递不同的参数获取不同的元素 * @param str * @returns {*} */ function $(str){ var str1 = str.charAt(0); if(str1==="#"){ return document.getElementById(str.slice(1)); }else if(str1 === "."){ return document.getElementsByClassName(str.slice(1)); }else{ return document.getElementsByTagName(str); } } /** * 功能：给定元素查找他的第一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */ function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node; } /** * 功能：给定元素查找他的最后一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */ function getLastNode(ele){ return ele.lastElementChild || ele.lastChild; } /** * 功能：给定元素查找他的下一个元素兄弟节点，并返回 * @param ele * @returns {Element|*|Node} */ function getNextNode(ele){ return ele.nextElementSibling || ele.nextSibling; } /** * 功能：给定元素查找他的上一个兄弟元素节点，并返回 * @param ele * @returns {Element|*|Node} */ function getPrevNode(ele){ return ele.previousElementSibling || ele.previousSibling; } /** * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回 * @param ele 元素节点 * @param index 索引值 * @returns {*|HTMLElement} */ function getEleOfIndex(ele,index){ return ele.parentNode.children[index]; } /** * 功能：给定元素查找他的所有兄弟元素，并返回数组 * @param ele * @returns {Array} */ function getAllSiblings(ele){ //定义一个新数组，装所有的兄弟元素，将来返回 var newArr = []; var arr = ele.parentNode.children; for(var i=0;i<arr.length;i++){ //判断，如果不是传递过来的元素本身，那么添加到新数组中。 if(arr[i]!==ele){ newArr.push(arr[i]); } } return newArr; }
以上是关于javaScript动画2 scroll家族的主要内容，如果未能解决你的问题，请参考以下文章
javascript三大家族：offset属性 scroll属性 client属性
前端学习(49)~offset相关属性和匀速动画(含轮播图实现)