js学习笔记（js改变css多属性值，多组动画，透明度动画）
JSON的差异化
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONtitle>
head>
<body>
<script>
var obj = {
"left" : 300,
"top" : 400,
"width" : 600,
"height" : 600
};
for (var key in obj){
console.log(key);//left,top,width,height
console.log(obj[key]);//300,400,600,600
}
script>
body>
html>
特效1： js改变css多属性值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS改变css多属性值title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
style>
head>
<body>
<button id="btn1">测试1button>
<button id="btn2">测试2button>
<div id="box">div>
<script src="工具/Tool.js">script>
<script>
window.addEventListener('load',function (ev) {
var box = Tool.$('box');
Tool.$('btn1').addEventListener('click',function () {
donghua(box,{'width': 400});
});
Tool.$('btn2').addEventListener('click',function () {
donghua(box,{'height' : 400,'left' : 800,'top' : 100});
})
});
/**
* 缓动动画
* @param ele 要做动画的元素
* @param json 元素的css属性和值（数组）
*/
function donghua(ele,json) {
var flag = false;//标志，标签的所有属性是否全部执行完
clearInterval(ele.ding); //将定时器绑定到要做动画的元素上
var step = 0,begin = 0, target = 0;
ele.ding = setInterval(function () {
flag = true;
for (var key in json){
begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
begin = parseInt(begin);//将字符串转成数字
target = parseInt(json[key]);
step = (target - begin) * 0.2;
step = (target > begin) ? Math.ceil(step) : Math.floor(step);
//当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
ele.style[key]= begin + step + 'px';
if (target !== begin){
flag = false;//说明全部属性还未执行完
}
}
//清除定时器
if (flag){
clearInterval(ele.ding);
}
},20)
}
script>
body>
html>
特效2：多组动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多组动画title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
style>
head>
<body>
<button id="btn">多组动画button>
<div id="box">div>
<script src="工具/Tool.js">script>
<script>
window.addEventListener('load',function (ev) {
var box = Tool.$('box');
Tool.$('btn').addEventListener('click',function () {
donghua(box,{'height' : 400,'left' : 800,'top' : 100},function () {
donghua(box,{'height' : 100,'left' : 100,'top' : 500},function () {
donghua(box,{'height' : 200,'left' : 200,'top' : 100},null);
});
});
});
});
/**
* 缓动动画
* @param ele 要做动画的元素
* @param json 元素的css属性和值（数组）
* @param fn 用来接收另一组动画的函数
*/
function donghua(ele,json,fn) {
var flag = false;//标志，标签的所有属性是否全部执行完
clearInterval(ele.ding); //将定时器绑定到要做动画的元素上
var step = 0,begin = 0, target = 0;
ele.ding = setInterval(function () {
flag = true;
for (var key in json){
begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
begin = parseInt(begin);//将字符串转成数字
target = parseInt(json[key]);
step = (target - begin) * 0.2;
step = (target > begin) ? Math.ceil(step) : Math.floor(step);
//当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
ele.style[key]= begin + step + 'px';
if (target !== begin){
flag = false;//说明全部属性还未执行完
}
}
//清除定时器
if (flag){
clearInterval(ele.ding);//代表一组动画做完了
//开启另一组动画
if (fn){
fn();
}
}
},20)
}
script>
body>
html>
特效3：透明度动画
在多组动画的基础上加一个opacity。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
style>
head>
<body>
<button id="btn">多组动画button>
<div id="box">div>
<script src="工具/Tool.js">script>
<script>
window.addEventListener('load',function (ev) {
var box = Tool.$('box');
Tool.$('btn').addEventListener('click',function () {
donghua(box,{'height' : 400,'left' : 800,'top' : 100,'opacity' : 0.5},function () {
donghua(box,{'height' : 100,'left' : 100,'top' : 500,'opacity' : 0.8},function () {
donghua(box,{'height' : 200,'left' : 200,'top' : 100,'opacity' : 1},null);
});
});
});
});
/**
* 缓动动画
* @param ele 要做动画的元素
* @param json 元素的css属性和值（数组）
* @param fn 用来接收另一组动画的函数
*/
function donghua(ele,json,fn) {
var flag = false;//标志，标签的所有属性是否全部执行完
clearInterval(ele.ding); //将定时器绑定到要做动画的元素上
var step = 0,begin = 0, target = 0;
ele.ding = setInterval(function () {
flag = true;
for (var key in json){
//获取要做动画的初始值
//因为opacity是小数，不好运算，所以先给它乘100，之后再除
if (key === 'opacity'){
begin = Tool.getstyle(ele,key) || 0; //获取要做动画的属性,这样得到的是一个字符串
begin = parseInt(begin * 100);//将字符串转成数字
target = parseInt(json[key] * 100);
}else{
begin = Tool.getstyle(ele,key) || 0;
begin = parseInt(begin );
target = parseInt(json[key]);
}
step = (target - begin) * 0.2;
step = (target > begin) ? Math.ceil(step) : Math.floor(step);
//当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
if (key === 'opacity') {
ele.style.opacity = (begin + step) / 100;
}else{
ele.style[key]= begin + step + 'px';
}
if (target !== begin){
flag = false;//说明全部属性还未执行完
}
}
//清除定时器
if (flag){
clearInterval(ele.ding);//代表一组动画做完了
//开启另一组动画
if (fn){
fn();
}
}
},20)
}
script>
body>
html>