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动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
随机推荐
- TPS和事务响应时间的关系
例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车 1.请问1秒钟最多能进几辆车? TPS=10 2.每辆车需要多长时间进行响应? reponse time = 1 3.改成20辆车 ...
- jQuery实现tag便签去重效果的方法
本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <head><script type="text/ja ...
- Struts2_day04--自定义拦截器_Struts2的标签库_表单标签
自定义拦截器 1 在struts2里面有很多的拦截器,这些拦截器是struts2封装的功能,但是在实际开发中,struts2里面的拦截器中可能没有要使用的功能,这个时候需要自己写拦截器实现功能 2 拦 ...
- 简单是Jedis实例(相对连接池而言)
在引入相关jar包后,只要new一个Jedis对象,就能做redis相关操作了.以下是一个简单的jedis实例: package com.pptv.redis; import java.util.Ar ...
- 说说M451例程讲解之定时器
关于定时器 相信很多人都不会陌生,无论是51还是32,任何微控制器,都会有定时器 定时器控制器包含 4 组 32-位定时器,TIMER0~TIMER3,提供用户便捷的计数定时功能.定时器可执行很多功能 ...
- 1854: [Scoi2010]游戏[并查集]
1854: [Scoi2010]游戏 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 4938 Solved: 1948[Submit][Status] ...
- centos6上安装docker
yum -y install epel-releaseyum -y install docker-ioyum install device-mapper-event-libs # 必需安装这一步,否 ...
- 自己开发Thinkpad电源管理程序
自己开发Thinkpad电源管理程序 - 知乎 https://zhuanlan.zhihu.com/p/20706403
- 关于一个非常非常无语的bug,与君共勉
今天,哦,不对,是昨天晚上,我花了大概四十分钟去找一个bug,结果还没找到 错误代码" $('#sendAreaInfo').citypicker('reset'); $('#sendAre ...
- Unable to locate parent package [json-default]
Unable to load configuration. - [unknown location] Caused by: Unable to locate parent package [json- ...