<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