解释

Question

当我在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,0);
  color:white;
  font-size:large;
  height:160px;
  width:230px;
  text-align:center;
  line-height:150px;
}

<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>

Answer 1

解释

您应该查看CSS3中的transition属性。

资源

请查看以下链接以获取更多信息：

实施例

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, 0);
  color: white;
  font-size: large;
  height: 160px;
  width: 230px;
  text-align: center;
  line-height: 150px;
  transition: all .5s linear;
}

<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>

Answer 2

实现这一目标的最佳方法是在宽度发生变化时进行CSS3过渡。

如下：

div
{
    transition:width 1s ease-in-out;
}

Answer 3

简单的方法，你可以使用css3过渡

艰难的，

var d = document,
    d1 = d.querySelector("#d1");

// simple transition with javascript
function jsTransitionScale(elm, width, height, speed) {
    var FPS = 60;

    var original_width = elm.offsetWidth,
        original_height = elm.offsetHeight;

    var width_range = width - original_width,
        height_range = height - original_height;

    var timeout = speed / FPS,
        width_change = width_range / FPS,
        height_change = height_range / FPS;

    var finish = new Date().getTime() + speed;

    var begin = setInterval(function () {
        original_width += width_change;
        original_height += height_change;

        elm.style.width = original_width + "px";
        elm.style.height = original_height + "px";

        if (new Date().getTime() >= finish) {
            elm.style.width = width;
            elm.style.height = height;
            clearInterval(begin);
        }
    }, timeout);
}

function chg() {
    jsTransitionScale(d1, 100, 100, 1000);
}

function chg2() {
    jsTransitionScale(d1, 230, 160, 1000);
}

d1.addEventListener("mouseover", chg);
d1.addEventListener("mouseout", chg2);

div {
    background-color:RGB(177, 0, 0);
    color:white;
    font-size:large;
    height:160px;
    width:230px;
    text-align:center;
    line-height:150px;
}

<div id="d1"></div>

http://jsfiddle.net/putrasurya/qb2x3zga/

Answer 4

你可以使用：

function chg() { document.getElementById("d1").innerHTML="Great Job!"; document.getElementById("d1").className="hover"; } function chg2() { document.getElementById("d1").innerHTML="Hover Over Me!"; document.getElementById("d1").className=""; }财产请阅读：

http://www.w3schools.com/css/css3_transitions.asp

＆＃13;

div
{
  background-color:RGB(177,0,0);
  color:white;
  font-size:large;
  height:160px;
  width:230px;
  text-align:center;
  line-height:150px;
  transition:  1s ease-in-out;
}
div.hover
{
   width:300px ;
   height:200px; 
   transition:  1s ease-in-out;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>

＆＃13;

    private void button4_Click(object sender, EventArgs e)
    {
        PowerPoint.CustomLayout ppCL = Globals.ThisAddIn.Application.ActivePresentation.SlideMaster.CustomLayouts.Add(
            Globals.ThisAddIn.Application.ActivePresentation.SlideMaster.CustomLayouts.Count + 1);
        ppCL.Name = "My Custom Master Layout - text without a bullet!";
        PowerPoint.Shape ppShape = ppCL.Shapes.AddPlaceholder(PowerPoint.PpPlaceholderType.ppPlaceholderBody);
        ppShape.TextFrame.TextRange.Text = "Candidate";
        ppShape.TextFrame.TextRange.ParagraphFormat.Bullet.Type = PowerPoint.PpBulletType.ppBulletNone;
    }

＆＃13;

Answer 5

使用CSS3，您不需要使用javascript来创建该效果..

div {
    background-color:RGB(177,0,0);
    color:white;
    font-size:large;
    height:160px;
    width:230px;
    text-align:center;
    line-height:150px;
    transition:all 1s;
}
div:hover {
    height:200px;
    width:300px;
}

调整DIV大小时需要平滑动画 - JavaScript

5 个答案:

解释

资源

实施例