Let 2 div one widen one to become taller

Source: Internet
Author: User

<style>
div {width:100px; height:150px; margin:20px; background:green;}
</style>

<script>
Window.onload = function () {
Declare the variable oDiv1 and let it get to the object DIV1 the element;
var oDiv1 = document.getElementById ("Div1");
Declare the variable oDiv2 and let it get to the object DIV2 the element;
var oDiv2 = document.getElementById ("Div2");

To move the mouse into a variable odiv1 create an event
Odiv1.onmouseover = function () {
function (current roundness, width, to 300 pixels)
Startmove (This, "width", 300);
}
To move the mouse out of a variable ODIV1 create an event
Odiv1.onmouseout = function () {
function (current element, width to 100 pixels)
Startmove (This, "width", 100);
}

To move the mouse into a variable oDiv2 create an event and assign a value
Odiv2.onmouseover = function () {
function (current element, height, to 300 pixels)
Startmove (This, "height", 300);
}
To move the mouse out of a variable oDiv2 create an event and assign a value
Odiv2.onmouseout = function () {
function (current element, height, to 150 pixels)
Startmove (This, "height", 150);
}

}
Create a function and set parameters (current element, attribute, target distance)
function Startmove (obj,name,itarget) {

Clear the current element of the timer;
Clearinterval (Obj.timer);
Creates a timer and assigns a value to the current element,
Obj.timer = setinterval (function () {
Sets the variable attr and assigns a value, gets the property value to the current element, and then takes an integer
var attr = parseint (GetStyle (obj,name));
Set variable speed and assign value (destination distance-attr)/6
var speed = (itarget-attr)/6;
/* Similar
if (speed>0)
{Speed=math.ceil (speed)} gives speed up rounding
Else
{Math.floor (speed)} gives speed up rounding */
Speed = speed > 0? Math.ceil (Speed): Math.floor (speed);
If the speed current distance = target distance
if (attr = = ITarget)
{
Responsible for the current element timer
Clearinterval (Obj.timer);
}
Else
{
Obj.style[name] = attr + speed + "px";
}

},30);
}

function GetStyle (obj,name) {
if (Obj.currentstyle) {
return Obj.currentstyle[name];
} else{
getcomputed (Obj,null) [name];
}

}

</script>

Body>
<div id= "Div1" ></div>
<div id= "Div2" ></div>


</body>

Let 2 div one widen one to become taller

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.