如何在javascript中正确实现滑动动画？

Question

在我学习 javascript 的过程中，我正在制作相同的滑块，但使用 javascript 上的动画（使用 css 这对我来说不是问题 - 它是在网站 google 上制作的），如下所示：

原始 Google 滑块（带有 css 的动画）：
http://www.google.com/about/datacenters/inside/

我目前的工作：

http://jsfiddle.net/TS7Xu/3/

<!-- language-all: lang-html -->
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    #promo{
    display:block;
    height: 354px;
    width: 790px;
    }
    .promo-item {
        width: 81px;
        height: 354px;
        float: left;
    }
    .promo-item.wide {
        width: 613px;
    }
    .threeP {
        background-color: rgb(206, 203, 203);
    }
    .oneP {
        background-color: rgb(241, 220, 182);
    }
    .twoP {
        background-color: rgb(187, 217, 226);
    }
</style>
</head>
<body>
<div id="promo">
    <div class="promo-item twoP wide" id="twoP">
      <div>
      </div>
    </div>
    <div class="promo-item threeP" id="threeP">
      <div>
      </div>
    </div>
    <div class="promo-item oneP" id="oneP">
      <div>
      </div>
    </div>
</div>


<script type="text/javascript">
var oneP = document.getElementById('oneP');
var twoP = document.getElementById('twoP');
var threeP = document.getElementById('threeP');
step = 1;
            function expandPanel1(){
                var h = oneP.clientWidth + step;
                oneP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel1()", 5);
                } else { oneP.style.width = 613+"px"; }
            }               
            function expandPanel2(){
                var h = twoP.clientWidth + step;
                twoP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel2()", 5)
                } else { twoP.style.width = 613+"px"; }
            }               
            function expandPanel3(){
                var h = threeP.clientWidth + step;
                threeP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel3()", 5)
                } else { threeP.style.width = 613+"px"; }
            }   
            //---------------------------------------------
                function expandPanel1Minus(){
                    var h = oneP.clientWidth - step;
                    oneP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel1Minus()", 5)
                    } else { oneP.style.width = 81+"px"; }
                }               
                function expandPanel2Minus(){
                    var h = twoP.clientWidth - step;
                    twoP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel2Minus()", 5)
                    } else { twoP.style.width = 81+"px"; }
                }               
                function expandPanel3Minus(){
                    var h = threeP.clientWidth - step;
                    threeP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel3Minus()", 5)
                    } else { threeP.style.width = 81+"px"; }
                }
            //---------------------------------------------
    oneP.onmouseover = function () {
        expandPanel1()
            expandPanel3Minus()
            expandPanel2Minus()
    } 
    twoP.onmouseover = function () {
        expandPanel2()
            expandPanel3Minus()
            expandPanel1Minus()
    } 
    threeP.onmouseover = function () {
        expandPanel3()
            expandPanel2Minus()
            expandPanel1Minus()
    }
</script>

我知道这个例子有错误，因为如果用鼠标在滑块上长时间驱动，它会开始“猛烈”运行:) 我故意降低动画速度。

有人可以指导我如何正确实施吗？

Answer 1

如果你想节省很多时间，你应该用 jQuery 来做。试试这个http://jsfiddle.net/QXRVb/ 解决方案。在那个例子中，我不喜欢调整 div 的大小。我使用 Z-indexes 和 jQuery animate 来移动它们。这样更容易为他们找到合适的位置。

<style>
#promo{
    width:900px;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
}
#oneP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;
    background:#999;
    z-index:1;
}
#twoP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:150px;
    background:#ddd;
    z-index:0;
}
#threeP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:750px;
    background:#666;
    z-index:1;
}
</style>

<html>
<div id="promo">
<div id="oneP">    
</div>
<div id="twoP">     
</div>
<div id="threeP">     
</div>
</div>
</html>

<script>
$('#oneP').mouseover(function() {
    $('#oneP').animate({
        left: 0
    },200);
    $('#threeP').animate({
        left: 750
    },200);
    $('#twoP').animate({
        left: 450
    },200);
});

$('#twoP').mouseover(function() {
    $('#oneP').animate({
        left: -450
    },200);    
    $('#threeP').animate({
        left: 750
    },200);
    $('#twoP').animate({
        left: 150
    },200);
});

$('#threeP').mouseover(function() {
    $('#threeP').animate({
        left: 300
    },200);    
    $('#oneP').animate({
        left: -450
    },200);
    $('#twoP').animate({
        left: -150
    },200);
});​
</script>`

通过这种方法，您可以轻松地将图像标签放入 div 中。

Answer 2

这是一个纯 JS 实现 - JSFiddle link。如果小提琴没有得到保存，这里只有 JS 位。 HTML 的其余部分与 OP 相同。函数go 在身体负载时被调用。

var f, s, t;
var which;

function go() {
    f = document.getElementById('oneP');
    s = document.getElementById('twoP');
    t = document.getElementById('threeP');

    which = s;

    f.onmouseover = function() {
        foo(this)
    };

    s.onmouseover = function() {
        foo(this)
    };

    t.onmouseover = function() {
        foo(this)
    };
}

function foo(e) {
    if (e.clientWidth < 613) {
        e.style.width = (e.clientWidth) + 10 + "px";
        which.style.width = (which.clientWidth - 10) + "px";

        setTimeout(function() {
            foo(e);
        }, 5);
    }
    else if (e.clientWidth > 613) {
        e.style.width = "613px";
        which.style.width = "81px";

        which = e;
    }
}​

我认为还有一些工作要做，动画不够快，因此可以在动画运行时将鼠标悬停在另一个部分上。我把那一点留给你:)