动画原理
动画基本原理.gif
人走路的时候， 步长
动画的基本原理 ： 让盒子的 offsetLeft + 步长
盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10
动画基本原理的完整源码：
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
开始
//动画的基本原理 盒子的 offsetLeft + 步长
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function() {
timer = setInterval(function() {
if(div.offsetLeft > 400)
{
clearInterval(timer);
}
div.style.left = div.offsetLeft + 10 + "px";
},20);
}
JS取绝对值：
Math.abs(-5) 取绝对值函数
|-5| = 5
1/基本动画函数
基本动画函数.gif
基本动画函数完整源码：
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
200
400
function $(id) {return document.getElementById(id)}
$("btn200").onclick = function() {
animate($("run"),200); // animate 自定义函数
// 第一个参数 谁做动画 第二参数目标位置
}
$("btn400").onclick = function() {
animate($("run"),400);
}
var arr = [];
arr.index = 10; // 自定 属性 arr 的 index arr 专属
var index = 20; // 变量 miss 自由的 任何人都可以使用
// 运动函数
/* for(var i=0; i
{
lis[i].index = i;
}*/
function animate(obj,target){
obj.timer = setInterval(function() { // 开启定时器
if(obj.offsetLeft > target)
{
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 10 + "px";
},30)
}
2/匀速运动封装函数
匀速运动封装.gif
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
#box1 {
position: absolute;
top: 150px;
width: 200px;
height: 200px;
background-color: purple;
}
200
400
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
btn200.onclick = function() {
animate(box,200);
animate(box1,500);
}
btn400.onclick = function() {
animate(box,400);
}
// 封装匀速运动
function animate(obj,target){
clearInterval(obj.timer); // 先清除定时器
var speed = obj.offsetLeft < target ? 5 : -5; // 用来判断 应该 + 还是 -
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result)<=5) // 如果差值不小于 5 说明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置
}
},30)
}
三个取整函数
这三个函数都是 数学函数
Math
Math.ceil() 向上取整 天花板
比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1
Math.floor() 向下取整 地板
比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2
Math.round() 四舍五入函数
console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2
缓动动画原理
匀速动画的原理： 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
缓动动画原理.gif
缓动动画原理的源码：
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
}
开始
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var target = 400;
var timer = null;
btn.onclick = function() {
timer = setInterval(function() {
// 盒子本身的位置 + 步长 (不断变化的)
var step = (target - box.offsetLeft) / 10; // 步长
console.log(step);
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 步长取整
box.style.left = box.offsetLeft + step + "px";
if(box.offsetLeft == target) // 判断结束条件
{
clearInterval(timer);
alert("到目标了")
}
},30)
}
缓动动画封装
( 缺陷：只能水平方向！随后的“封装运动框架单个属性会进一步改进”)
封装函数动画.gif
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
opacity: 0.3;
}
200
400
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,200);
}
btn400.onclick = function() {
animate(box,400);
}
// 封装
function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 计算步长 动画的原理 盒子本身的位置 + 步长
var step = (target - obj.offsetLeft) / 10; // 步长
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长
// obj.style.left = 盒子本身的位置 + 步长
obj.style.left = obj.offsetLeft + step + "px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},30)
}
js 常用 访问 CSS 属性
我们访问得到css 属性，比较常用的有两种：
1. 利用点语法
box.style.width box.style.top
点语法可以得到 width 属性 和 top属性 ** 带有单位的。 100px
但是这个语法有非常大的缺陷**， 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w
2. 利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
attr 即代表属性
console.log(box.style["left"]);
最大的优点 ： 可以给属性传递参数
访问CSS属性的源码：
div {
width: 100px;
height: 100px;
background-color: pink;
left: 10px;
position: absolute;
top: 20px;
}
var box =document.getElementById("box");
console.log(box.style.left);
console.log(box.style["left"]);
function fn(attr){
console.log(box.style[attr]);
}
fn("height");
fn("width");
得到css 样式
我们想要获得css 的样式， box.style.left 和 box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办？
核心： 我们怎么才能得到内嵌或者外链的样式呢？
obj.currentStyle ie opera 常用
外部(使用)和内嵌(使用
2 .window.getComputedStyle("元素", "伪类") w3c
两个选项是必须的， 没有伪类 用 null 替代
得到CSS样式源码 ie和opera 和w3c
div {
width: 100px;
height: 200px;
background-color: pink;
left: 10px;
position: absolute;
}
