运动框架的单位是px
贴上代码:
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove1(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true; //所有值都已经到达
for (var attr in json) {
//去当前值
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
//算速度
var iTarget = json[attr];
var bodyWith = document.body.offsetWidth;
var newTarget = 0;
if (attr == 'marginLeft' || attr == 'width') {
newTarget = Math.floor(bodyWith * iTarget / 100);
} else {
newTarget = iTarget;
}
var iSpeed = (newTarget - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != newTarget) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; //优先级
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px ';//终结果这里是px单位结尾
}
}
if (bStop) {
if(attr == 'marginLeft' || attr == 'width')
{
var numBefore = parseInt(getStyle(obj,attr));
var numAfter = Math.floor(numBefore/bodyWith*100);
obj.style[attr] = numAfter + '%';//尝试转化但不能动态获值或赋值
}
else
{
clearInterval(obj.timer);
}
if (fn) {
fn();
}
}
}, 30)
}
突出的主要问题:
- 返回的是固定的值,触发函数以后放缩页面就会影响原来布局
- 无法动态获取可视窗口的宽,不刷新就不能归位
- 要完成鼠标onmouseover、onmouseout事件,任意缩放ZOOM都不会改变动态效果。