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";等
浙公网安备 33010602011771号