当我在DIV上空盘旋时,它的高度和宽度都会增加,但我不知道如何让它更加平滑,而不是一次调整大小
function chg()
{
document.getElementById("d1").innerHTML="Great Job!";
document.getElementById("d1").style.width="300px";
document.getElementById("d1").style.height="200px";
}
function chg2()
{
document.getElementById("d1").innerHTML="Hover Over Me!";
document.getElementById("d1").style.width="230px";
document.getElementById("d1").style.height="160px";
}
div
{
background-color:RGB(177,0);
color:white;
font-size:large;
height:160px;
width:230px;
text-align:center;
line-height:150px;
}
<!DOCTYPE html> <html> <body> <div onmou@R_403_401@ver="chg()" onmou@R_403_401@ut="chg2()" id="d1">Hover Over Me!</div> </body> </html>
解决方法
说明
你应该看看CSS3中的过渡属性.
资源
有关更多信息,请查看以下链接：
> CSS3 Transitions
> Using CSS transitions
例
function chg() {
document.getElementById("d1").innerHTML = "Great Job!";
document.getElementById("d1").style.width = "300px";
document.getElementById("d1").style.height = "200px";
}
function chg2() {
document.getElementById("d1").innerHTML = "Hover Over Me!";
document.getElementById("d1").style.width = "230px";
document.getElementById("d1").style.height = "160px";
}
div {
background-color: RGB(177,0);
color: white;
font-size: large;
height: 160px;
width: 230px;
text-align: center;
line-height: 150px;
transition: all .5s linear;
}
<div onmou@R_403_401@ver="chg()" onmou@R_403_401@ut="chg2()" id="d1">Hover Over Me!</div>
