javascriptはウェブページにおける簡易運動を実現する(幅の高さ、透明度、位置を変更する)
2644 ワード
普段の仕事の中でウェブページの関連する運動を書いて、よくすべてとても簡単で、たとえば幅の高さを変えて、透明度、位置、最も常用するいくつかの形式で、手間を省くため、統合して、そこで次のようなものがあります.
互換性:IEシリーズ、chrome、firefox、opera、Safari、360
互換性:IEシリーズ、chrome、firefox、opera、Safari、360
/*
javascript
Move.action(dom ,json , , )
:
var box = document.getElementById('Ele');
Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){
console.log('end');
});
*/
var Move = {
version: '1.5',
//
isEmptyObject: function(obj) {
for (var attr in obj) {
return false;
}
return true;
},
// CSS
getStyle: function(obj, attr) {
if (obj.currentStyle) { //IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
},
//
action: function(obj, json, sv, callback) {
_this = this;
//obj
if (_this.isEmptyObject(obj)) {
return false;
}
//
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var isAllCompleted = true, //
speed, //
attrValue, //
targetV; //
for (attr in json) {
attrValue = _this.getStyle(obj, attr);
switch (attr) {
case 'opacity':
attrValue = Math.round((isNaN(parseFloat(attrValue)) ? 1 : parseFloat(attrValue)) * 100);
speed = (json[attr] * 100 - attrValue) / (sv || 4);
targetV = json[attr] * 100;
break;
default:
attrValue = isNaN(parseInt(attrValue)) ? 0 : parseInt(attrValue);
speed = (json[attr] - attrValue) / (sv || 4);
targetV = json[attr];
}
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// ,isAllCompleted
if (attrValue != targetV) {
isAllCompleted = false;
}
switch (attr) {
case 'opacity':
{
obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";
obj.style.opacity = (attrValue + speed) / 100;
};
break;
default:
obj.style[attr] = attrValue + speed + 'px';
}
}
// , (isAllCompleted=true)
if (isAllCompleted) {
clearInterval(obj.timer);
if (typeof callback === 'function') {
callback();
}
}
}, 30);
}
};
以上はjavascriptがウェブページに関連する簡易運動を実現する方法を述べました.Javascript簡易運動を実現することに対して、啓発があります.