js-Package JS let a div or img move

Source: Internet
Author: User

/*
* 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.