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动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
随机推荐
- 将spark默认日志log4j替换为logback
1.将jars文件夹下apache-log4j-extras-1.2.17.jar,commons-logging-1.1.3.jar, log4j-1.2.17.jar, slf4j-log4j12 ...
- UNMET PEER DEPENDENCY @angular/common@2.3.1
install of angular-cli results in unmeet peer dependencies. OSX 10.11.6node v6.9.1npm v3.10.8 [sudo] ...
- 那些在BAE上部署node.js碰到的坑
在BAE上使用node.js半年多了,其中碰到了不少因为BAE云环境限制碰到的坑 写下来大家碰到了,也不用那么麻烦的去看好几天代码了,直接对症下药 官方公布的坑有: BAE是使用package.jso ...
- 系统之间通讯方式—SOAP（web service）
[web service 简介] 是一种新的web应用程序分支,是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.web service是一个应用组件,它逻辑性的为其他应用程序提供数据与 ...
- shell脚本学习总结04--终端信息的获取和设置
tput tput 命令将通过 terminfo 数据库对您的终端会话进行初始化和操作.通过使用 tput,您可以更改几项终端功能,如移动或更改光标.更改文本属性,以及清除终端屏幕的特定区域. 文本属 ...
- 【黑金原创教程】【Modelsim】【第三章】理想就是美丽
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
- 01.Elasticsearch安装
1.下载运行Elasticsearch 1.下载解压elasticsearch Elasticsearch官网地址:https://www.elastic.co/ Elasticsearch最新版下载 ...
- Maven 构建Spring-Boot工程报错
Execution default of goal org.springframework.boot:spring-boot-maven-plugin:1.5.6.RELEASE:repackage ...
- Groovy中的脚本与类
包名 当你在groovy中定义类的时候需要指定包名,这和java中类似不多介绍. 导入 groovy中的导入也跟java类似,有一下五种: 默认导入 groovy默认导入了一下几个包和类: impor ...
- 使用Servlet3.0新特性asyncSupported=true时抛异常java.lang.IllegalStateException: Not supported
最近在运用Servlet3.0新特性:异步处理功能的时候出现以下了2个问题: 运行时会抛出以下两种异常: 一月 19, 2014 3:07:07 下午 org.apache.catalina.core ...