javaScript动画2 scroll家族
offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高+ padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而style.left不可以
二、offsetTop 返回的是数字，而style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给HTML 元素指定过top 样式，则style.top 返回的是空字符串。
style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）
三个函数
<!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="data:images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="data:images/nav.png" alt=""/>
</div>
<div class="main" id="main">
<img src="data:images/main.png" alt=""/>
</div>
</body>
</html>
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);
}
my.js
返回顶部
<!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="data: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>
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;
}
animate.js
javaScript动画2 scroll家族的更多相关文章
- JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...
- JavaScript Scroll家族以及封装
JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...
- JavaScript offset、client、scroll家族
offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- js中对象的一些特性，JSON，scroll家族
一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
随机推荐
- requirejs源码分析，使用注意要点
本文将深度剖析require.js代码,为了是大家更高效.正确的去使用它,本文不会介绍require的基本使用! 概要 先来一个流程图来概要一下大概流程 在require中,根据AMD(Asynchr ...
- Hibernate_day03--Hibernate多对多操作
Hibernate多对多操作 多对多映射配置 以用户和角色为例演示 第一步 创建实体类,用户和角色 第二步 让两个实体类之间互相表示 (1)一个用户里面表示所有角色,使用set集合 具体: User. ...
- zookeeper未授权访问漏洞
1.什么是zookeeper? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,它是集群的管理者,监视着集群中各个节点的状态根据节点提交 ...
- js Tab切换实例
js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
- <link>标签的rel属性全解析
<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...
- JS中的call、apply、bind 用法解疑
JS中的caller arguments.callee call apply bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj ...
- Rsync文件同步机备份工具使用
一,Rsync简介 Rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步的优秀工具.适用于多种操作平台. 全称是Remote synchronization 具有可使本地和远 ...
- 20165330 2017-2018-2 《Java程序设计》第8周学习总结
课本知识总结 第十二章 Java多线程机制 Java中的线程 进程:是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过程 线程:一个进程在其执行过程中,可以产生多个线程,形成多条 ...
- wf-删除所选
w框架-结合用户的不同点击路径,提交正确的id集合. <table class="table"> <tr> <td></td> &l ...
- virt-manager 操作 kvm虚拟机中鼠标不同步的问题
在/etc/libvirt/qemu下找到对应的xml配置文件 在<devices>标签下添加 <input type='tablet' bus='usb'/> 然后 vi ...