<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 100px;
height: 100px;
background-color:pink;
margin: 10px;
float: left;
border: 10px solid #000;
}
</style>
<script>
window.onload=function()
{
var div1=document.getElementById("div1");
// var div2=document.getElementById("div2");
div1.onmouseover=function ()
{
yundong(this,500);
}
div1.onmouseout=function ()
{
yundong(this,100);
}
}
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name]
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function yundong(obj,mubiao)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur=parseInt(obj.getStyle(obj,"height"));
sudu=(mubiao-cur/6);
sudu=sudu>0?Math.ceil(sudu):Math.floor(sudu);
if(cur==mubiao)
{
clearInterval(obj.timer)
}
else
{
obj.style.height=cur+sudu+"px";
}
},30)
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>
杨念
相关分类