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动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
随机推荐
- Java千百问_05面向对象（011）_引用传递和值传递有什么差别
点击进入_很多其它_Java千百问 1.什么是值传递 值传递,是将内存空间中某个存储单元中存放的值,传送给还有一个存储单元.(java中的存储单元并不是物理内存的地址,但具有相关性) 比如: //定义 ...
- 剑指 offer set 25 求 1+2+...+n
题目 要求不能使用乘除法, for, while, if else, switch, case 等关键字 思路 1. 循环已经命令禁止, 禁用 if, 意味着递归也不能使用. 但即便如此, 我们仍然要 ...
- Redis异构集群数据在线迁移工具Redis-Migrate-Tool【转】
摘要:Redis-Migrate-Tool(后面都简称RMT),是唯品会开源的redis数据迁移工具,主要用于异构redis集群间的数据在线迁移,即数据迁移过程中源集群仍可以正常接受业务读写请求,无业 ...
- 使用ProcDump工具抓取dump
首先得到要抓取的进程号 cd %windir%\syswow64\inetsrvappcmd list wp得到pid之后, 在任务管理器里发现w3wp.exe的CPU总在49%-60%左右, 间歇性 ...
- Python学习笔记6-字典Dict
Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. >>> person ...
- Keil调试程序如何查看变量
第一个问题:调试时候想实时查看某一变量变化? view 菜单下的 watch windows,全局变量才能查看 比如要查看u8 adcx的值变化,如下: 全速运行后,如下: 无法查看!什么问题? 该变 ...
- [SCOI2010]字符串
思路: 设1为向(1,1)方向走,0为向(1,-1)方向走.那么题意可转化为从(0,0)走到(n+m,n-m)且不能跨过y=0的方案数.总方案数C(n+m,n),然后要减去不合法的即线路通过y=-1的 ...
- github 's usage
author:headsen chen date: 2018-05-30 10:50:56 notice:This article is created by headsen chen him ...
- 使用Servlet3.0新特性asyncSupported=true时抛异常java.lang.IllegalStateException: Not supported
最近在运用Servlet3.0新特性:异步处理功能的时候出现以下了2个问题: 运行时会抛出以下两种异常: 一月 19, 2014 3:07:07 下午 org.apache.catalina.core ...
- R中利用SQL语言读取数据框（sqldf库的使用）
熟悉MySQL的朋友可以使用sqldf来操作数据框 # 引入sqldf库(sqldf) library(sqldf) # 释放RMySQL库的加载(针对sqldf报错) #detach("p ...