Multi-object, any value motion frame

Source: Internet
Author: User
Follow the video to learn more about the motion frame. It is easy to use. Simply write an example: move the mouse over to change the transparency from 60 to 100, provided that the object in the css layout already has the opacity attribute value window. onloadfunction () {varaDivdocument. getElementsByTagName (& amp ;#...

Follow the video to learn more about the motion frame, the use is very simple, simple to write an example of use:

Move the mouse to change the transparency from 60 to 100, provided that the object in the css layout already has the opacity Attribute Value

Window. onload = function ()
{
Var aDiv = document. getElementsByTagName ('div ');
Var I = 0;
For (I = 0; I {


ADiv [I]. onmouseover = function ()
{
StartMove (this, 'opacity, 100 );
}
ADiv [I]. onmouseout = function ()
{
StartMove (this, 'opacity ', 60 );
}
}
}

 

 

Code of the framework itself:

 

// JavaScript Document/*** multi-object, any value motion frame obj: the object to be moved attr: the attribute to be changed iTarget: target point to be reached by the attribute value *** // function for retrieving the element attribute value */function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];} function startMove (obj, attr, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {var iCur = 0; if (attr = 'opacity ') {iCur = parseInt (parseFloat (getStyle (obj, attr) * 100 );} Else {iCur = parseInt (getStyle (obj, attr);} var iSpeed = (iTarget-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur = iTarget) {clearInterval (obj. timer);} else {if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px ';}}, 30 );}

 

Related Article

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.