js运动框架
程序员文章站
2022-03-27 09:36:41
...
js的运动框架
. 第一次写博客希望谅解 js的运动框架其实就是对于元素的位置的改变
1:理解style和offsetstyle的区别
2:Json和fon in的运用
3:数学知识的理解
4:对定时器的理解和运用
js代码
function getStyle(obj,name)
{
//解决兼容性问题,对于js中的原生库里面的理解,获取属性
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
//添加一个函数参数让能够实现多个物体变化
//利用json进行多参数传输
//for in 的运用
function Move(obj,Json,Funsan)
{
//清除之前的定时器,避免产生抖动的影响
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
for(var attr in Json)
{
var cur=0;
//获取样式时需要考虑为透明度的问题
if(attr=='opacity')
{
//获取盒子的透明度的大小,利用math.round进行取整
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
//console.log('cur:'+cur);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
//设置变化的速度的大小
var speed=(Json[attr]-cur)/6;
//速度进行取整操作,上取整和下取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==Json[attr])
{
clearInterval(obj.timer);
//编写其他函数的格式
if(Funsan)
{
Funan;
}
}
else
{
if(attr=='opacity')
{
//console.log(speed);
obj.style.filter='alpha(opcity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
//document.getElementById('txt1').value=obj.style.opacity;
}
else
{
obj.style[attr]=cur+speed+'px';
//console.log(obj.alpha);
}
}
}
},30)
}
其实运动框架就是对于循环的使用,学会简化代码,将代码进行封装是我们必须学习的一部分
框架还是不完整
当出现多个值需要改变时会出现问题
做法用一个布尔类型的值用于判断所有的是否都达到了目标点
然后在进行定时器的删除
上一篇: php redis数据库操作类
下一篇: HTML简介