正文
js动画学习笔记
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<html>
<head>
<meta charest="utf-8">
<title>test</title>
<style>
#div{
background:darkred;
position:absolute;
width:200px;
height:200px;
left:-200px;
}
#span1{
background: blue;
position: relative;
width:50px;
top:0;
left:200px;
}
#div2{
background: red; position:relative;
left:350px;
width:200px;
height:200px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
//这是速度动画
// window.onload = function () {
// var div = document.getElementById("div");
// div.onmouseover = function(){
// start1(0);
// }
// div.onmouseout = function(){
// start1(-200);
// }
// };
// var timer=null;
// function start1(target) {
// var speed = 0;
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// //用来判断该加还是该减
// if (div.offsetLeft > target) {
// speed = -10;
// }
// else {
// speed = 10;
// }
// //用来判断当达到目标值时的操作
// if (div.offsetLeft == target) {
// clearInterval(timer);
// } else {
// div.style.left = div.offsetLeft + speed + "px";
// }
// }, 30)
// } //下面是分散的函数，上面的是把两个函数联合起来了
// function start(){
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// if(div.offsetLeft===0)
// {
// clearInterval(timer);}
// else
// {
// div.style.left = div.offsetLeft + 10 + "px";}
// },30);
// }
// function stop(){
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// if(div.offsetLeft == -200)
// {
// clearInterval(timer);}
// else
// {
// div.style.left = div.offsetLeft - 10 + "px";}
// },30);
// } //这是透明度动画
window.onload = function () {
var div2 = document.getElementById("div2");
div2.onmouseover = function () {
start(80);
};
div2.onmouseout = function () {
start(30);
}
};
var timer = null;
var opacity = 30;//当前透明度，初始值为30
function start(target){
clearInterval(timer);
var speed ;
var div2 = document.getElementById("div2");
timer = setInterval(function () {
if(opacity > target)//如果当前的透明度大于目标值
{speed = -10;}
else
{speed = 10;} if(opacity == target)//如果当前的透明度等于目标值，就结束定时器
{clearInterval(timer);}
else{
opacity += speed;
div2.style.filter = "alpha(opacity:" + opacity +");";
div2.style.opacity = opacity/100;
}
},300)
} //这里是缓冲动画
// window.onload = function () {
// var div = document.getElementById("div");
// div.onmouseover = function(){
// start1(0);
// };
// div.onmouseout = function(){
// start1(-200);
// }
// };
// var timer=null;
// function start1(target) {
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// var speed = (target - div.offsetLeft)/20;
// console.log(div.offsetLeft);
// //这里值得注意的是，因为CSS中的像素大小都是整数的，所以一定要记得把speed取整，且应该是向上取整的，
// //而对于正数，向上取整为 Math.ceil(),而对于负数要用Math.floor()
// if(speed>0)
// speed = Math.ceil(speed);
// else
// speed = Math.floor(speed);
// //用来判断当达到目标值时的操作
// if (div.offsetLeft == target) {
// clearInterval(timer);
// } else {
// div.style.left = div.offsetLeft + speed + "px";
// }
// }, 30)
// } </script>
</head>
<body>
<div id="div"><span id="span1">cccccccc</span></div>
<div id="div2">jjjj</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#div ul {
list-style: none;
}
#div ul li{
width:200px;
height:200px;
margin:40px;
background: red;
filter:alpha(opacity:30);
opacity:0.3; } /*div{*/
/*background:red;*/
/*width:200px;*/
/*height:200px;*/
/*filter:alpha(opacity:30);*/
/*opacity:0.3;*/
/*margin:30px;*/
/*}*/
</style>
<script>
window.onload = function () {
var div = document.getElementsByTagName("li");
for (var i = 0;i<div.length;i++){
div[i].timer = null;//这里应该是为每一个元素都定义一个timer,不然后面每个元素都会争抢timer,导致不好的效果。
div[i].onmouseover = function () {
start (this,400);
};
div[i].onmouseout = function () {
start(this,200);
}
}
};
//var timer = null;这里就不能再像这样定义一个公用的timer了，而是要为每一个元素都定义一个timer
function start(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (target - obj.offsetWidth)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == obj.offsetWidth)
clearInterval(timer);
else
obj.style.width = obj.offsetWidth + speed + "px";
},30);
} // window.onload = function () {
// var div = document.getElementsByTagName("div");
// for(var i=0;i<div.length;i++){
// div[i].alpha = 30;
// div[i].timer = null;
// div[i].onmouseover = function () {
// start(this,100);
// };
// div[i].onmouseout = function () {
// start(this,30);
// };
// }
// };
// function start(obj,target){
// console.log("123");
// var speed = 0;
// clearInterval(obj.timer);
// obj.timer = setInterval(function () {
// if(obj.alpha > target)//如果当前的透明度大于目标值
// { speed = -10;}
// else
// { speed = 10;}
//
// if(target == obj.alpha)
// {clearInterval(obj.timer);}
// else{
// obj.alpah += speed;
// obj.style.filter = "alpha(opacity:" + obj.alpah + ");";
// obj.style.opacity = obj.alpha/100;
// }
// },30);
// } </script>
</head>
<body>
<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
</body>
</html>
<html>
<head>
<meta charest="urf-8">
<title>test</title>
<style>
#div ul {
list-style: none;
}
#div ul li{
width:200px;
height:200px;
margin:40px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
border:10px solid #000;
}
</style>
<script>
//window.onload = function () {
// var div = document.getElementsByTagName("li");
// for (var i=0;i<div.length;i++){
// div[i].timer = null;
// div[i].onmouseover = function () {
// start(this,"width",400);
// };
// div[i].onmouseout = function () {
// start(this,"width",200);
// }
// }
//};
//function start(obj,attr,target) {
// clearInterval(obj.timer);
// obj.timer = setInterval(function () {
// var icur = parseInt(getStyle(obj,attr));
// var speed = (target - icur)/8;
// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// if(target = parseInt(icur))
// clearInterval(timer);
// else
// obj.style[attr] = icur + speed + "px";
// },30)
//}
//function getStyle(obj,attr) {
// if(obj.currentStyle)
// return obj.currentStyle;
// else
// return getComputedStyle(obj,false)[attr];
//} window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[0].onmouseover=function(){
startMove(this,"height",400);
}
aLi[0].onmouseout=function(){
startMove(this,"height",200);
}
}
aLi[1].onmouseover=function(){
startMove(this,"width",400);
}
aLi[1].onmouseout=function(){
startMove(this,"width",200);
} }
//var timer=null;
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed=(iTarget-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==iTarget){
clearInterval(obj.timer);
}
else{
obj.style[attr]=icur+speed+"px";
}
},30);
}
function getStyle(obj,attr) {
if(obj.currentStyle)
return obj.currentStyle;
else
return getComputedStyle(obj,false)[attr];
}
</script>
</head>
<body>
<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
较为完整的代码
function getStyle(obj,attr) {
if(obj.currentStyle)
return obj.currentStyle;
else
return getComputedStyle(obj,false)[attr];
}
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[0].onmouseover=function(){
startMove(this,"height",400);
}
aLi[0].onmouseout=function(){
startMove(this,"height",200);
}
}
aLi[1].onmouseover=function(){
startMove(this,"opacity",100);
}
aLi[1].onmouseout=function(){
startMove(this,"opacity",30);
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur = 0;
if(attr == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//本来最大是1的，但是习惯用最大为100的
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-icur)/8;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(icur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.filter = "alpha(opacity:"+(icur+speed)+")";//针对IE
obj.style.opacity = (icur+speed)/100;//针对firefox和chrome
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30)
}
完整代码
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true; //标志所有运动是否到达目标值
for(var attr in json){
var curr=0; //获取当前的值，设置为0下面进行赋值
//判断是否为透明度
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100); //对透明度处理
}else{
curr=parseInt(getStyle(obj,attr)); //对普通的宽高处理
}
//移动速度处理
var speed=0;
speed=(json[attr]-curr)/8; //json[attr]为属性值即目标值
speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整数，将速度取整从而达到目标值
//检测停止
if(curr!= json[attr]){
flag=false;//检测为false则继续下面的操作
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(curr+speed)+");//IE浏览器
obj.style.opacity=(curr+speed)/100;//firefox浏览器
}else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){ //检测为true则继续下面的操作
clearInterval(obj.timer);
if(fn){ //检测是否有回调函数，有就执行
fn();
}
}
},30);
}
//取样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //IE取样式
}else{
return getComputedStyle(obj,false)[attr];
}
}
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。(div.style.width可以获取到内联设置中width的值，获取到内嵌中的是width+padding+border) 例如：
#div{width:200px;height:200px; border:1px solid #ccc;}这样一个样式，当我们使用var div = document.getElementById("div");div.offsetWidth的值为202，200+1+1,；所以当我们使用div.style.width = div.offsetWidth- 1 + "px"时结果是宽度在增大，而不是减小。所以此时我们可以使用获取样式的方法来只获取到样式定义中的width（200）
function getStyle(obj,attr){
if(obj.currentStyle){
//currentStyle针对IE浏览器；
return obj.currentStyle[attr];}
else{return getComputedStyle(obj,flase)[attr];}}
//getComputedStyle 针对Firefox浏览器
这样我们就可以这样使用了，div.style.width = parseInt(getStyle(div,"width")) - 1 + "px";//其中parseInt就是将字符串转换Wie整形的数字。
同样这个方法是可以获取到其他的属性的，比如：div.style.font-size = parseInt(getStyle(div,"font-size")) - 1 + "px";等
