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

Question

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

javascriptjqueryanimationslidersettimeout

5

在我学习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>

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

有人能给我一些关于如何正确实现这个的指导吗？

- user1769072

你可以完全使用CSS3来实现这个。我正在为你准备一个例子。 - tobspr

@tobias-springer 我知道可以用CSS做到（对我来说很简单），但我正在学习JavaScript，我非常有兴趣用它来实现这个。 - user1769072

好的，这里是 CSS 解决方案：http://jsfiddle.net/aJzgJ/4/embedded/result/ - tobspr

愿意使用jQuery还是仅使用JavaScript？ - JFK

@JFK 没关系。简单来说，甚至是算法的口头描述也可以。我不希望在这里让任何人为他增加不必要的工作量。如果你准备参与其中 - 我很高兴。请不要为你制定框架，无论如何，这看起来很愚蠢，也不公平 :) - user1769072

2个回答

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中。

- satire

非常感谢您的时间和您大脑的"处理时间"。 :) 您的方法没有被忽视，感谢您的经验！ - user1769072

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Satyajit · Accepted Answer

这是一个纯JS实现 - JSFiddle link。如果fiddle没有保存，这里只有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;
    }
}

我认为还有一点工作要做，动画不够快，因此在动画运行时可能会在另一个部分上悬停。这一点就留给你了 :)