Danni11
2017-09-20 22:48
<script>
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}//封装一个方法去获得任何一个属性值,同时方法要考虑兼容
function startMove(obj,arrt,iTarget,fn) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
//1、判断属性值里是否有透明度,如有的话小数点和像素怎么处理
var icur=0;
if(arrt=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,arrt))*100);
}else{
icur=parseInt(getStyle(obj,arrt));
}
//2、算速度,速度=目标-参数m/h,并取整数
var speed=(iTarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止、得出透明度、得出其他值
if (icur==0){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if (arrt=='opacity'){
obj.style.filter='alpha:(opacity:'+icur+speed+')';
obj.style.opacity=(icur+speed)/100;
}else {
obj.style[arrt]=icur+speed+'px';
}
}
},30)
}
/////// 以上是一个框架 ///////
window.onload=function () {
var Li=document.getElementById('li1');
Li.onmouseover=function () {
startMove(Li,'height',200,function(){
startMove(Li,'width',400,function(){
startMove(Li,'opacity',100);
})
})
}
}
attr 与 arrt
if (icur==iTarget){ //判断条件是到达目标 而不是==0
clearInterval(obj.timer);
if(fn){
fn();
}
你调用封装的框架没看看!
JS动画效果
113920 学习 · 1494 问题
相似问题