/*
* Motion function
Parameters
* element node for elem operation
* CSS Properties and CSS property values on element nodes of the obj operation
* CSS properties on the element node of the attr operation
* Target value of the CSS property on the element node of the target operation
* The function to be executed after the FN movement has ended
*/
function Startmove (elem, obj, fn) {
Open Timer
Clearinterval (Elem.timer);
Elem.timer = setinterval (function () {
Assume that each property reaches the target value
var flag = true;
Multi-attribute simultaneous motion support
for (var attr in obj) {
Target value
var target = obj[attr];
Gets the current value of the element
var V;
if (attr = = "opacity") {
v = getStyle (Elem, "opacity");
v = math.round (v * 100);
}else{
v = parseint (GetStyle (Elem, attr));
}
Console.log (v);
Find the target value and the current worth of poor
var dist = target-v;
Request Step
var speed = DIST/6;
if (speed>0) {
Speed = Math.ceil (speed);//rounding up, if not rounded, decimal is not a valid value, so the target value may not be reached
}else{
Speed = Math.floor (speed);
}
Update
if (attr = = "opacity") {
Elem.style.opacity = (v+speed)/100;
if (/msie/.test (navigator.useragent)) {//If the browser is IE, execute the compatible code
Elem.style.filter = "Alpha (opacity:" + (V+speed) + ")";
}
}else{
ELEM.STYLE[ATTR] = v+speed+ "px";
}
There is a property that does not reach the target value
if (v! = target) {
Flag = false;
}
}
Stop the timer if the target value has been reached
if (flag) {
Clearinterval (Elem.timer);
If FN is present, execute the
if (FN) {
FN ();//Execute function
}
}
}, 30);
}
js-Package JS let a div or img move