Home > Developer > Web Develop
// Obtain the style value function getStyle (obj, attr) {if (obj. currentStyle) // IE {return obj. currentStyle [attr];} else // Chrome, FF {return getComputedStyle (obj, false) [attr] ;}// input parameter: motion target, motion parameter key-Value Pair (json), connection function start_move (obj, json, fn_end) {// clear the timer clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // determine whether to stop the motion. // retrieve the attributes for (var attr in json) from json in sequence) {var cur = 0; // record the current attribute // obtain the current attribute value if (attr = "Opacity") {// ensure that the cur is an integer cur = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {cur = parseInt (getStyle (obj, attr ));} // calculate the speed var speed = (json [attr]-cur)/6; speed = speed> 0? Math. ceil (speed): Math. floor (speed); // determines whether to stop the motion if (cur! = Json [attr]) // if the current value is not equal to the target value {bStop = false; // modify the obj attribute if (attr = "opacity") {obj. style. filter = "alpha (opacity:" + cur + speed + ")"; obj. style. opacity = (cur + speed)/100;} else {obj. style [attr] = cur + speed + "px" ;}} if (bStop) {clearInterval (obj. timer); // clear the timer if (fn_end) {// call the connection function fn_end ();}}});}
GetComputedStyle function: compatible with Chrome and FF to get element styles.
It can make up for the shortcomings of the style,. The same as currentStyle,.
<!DOCTYPE HTML>
Running effect:
Reference: http://hi.baidu.com/lepharye/item/c36d3ba9ab3a919c14107344
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
