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

Question

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

use*_*072 5 javascript jquery animation slider settimeout

在我学习javascript的过程中,我正在制作相同的滑块,但是使用javascript上的动画(使用css对我来说不是问题 - 它是在谷歌网站上制作的),如下所示:

原始Google幻灯片(带css的动画):http:
//www.google.com/about/datacenters/inside/

到目前为止我的工作:

<!-- 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>

Run Code Online (Sandbox Code Playgroud)

我知道这个例子有错误,因为如果用滑块上的鼠标长驱动器,它开始"猛烈地"运行:)我故意降低了动画速度.

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

Answer 1

Sat*_*jit 1

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

\n\n

var f, s, t;\nvar which;\n\nfunction go() {\n    f = document.getElementById(\'oneP\');\n    s = document.getElementById(\'twoP\');\n    t = document.getElementById(\'threeP\');\n\n    which = s;\n\n    f.onmouseover = function() {\n        foo(this)\n    };\n\n    s.onmouseover = function() {\n        foo(this)\n    };\n\n    t.onmouseover = function() {\n        foo(this)\n    };\n}\n\nfunction foo(e) {\n    if (e.clientWidth < 613) {\n        e.style.width = (e.clientWidth) + 10 + "px";\n        which.style.width = (which.clientWidth - 10) + "px";\n\n        setTimeout(function() {\n            foo(e);\n        }, 5);\n    }\n    else if (e.clientWidth > 613) {\n        e.style.width = "613px";\n        which.style.width = "81px";\n\n        which = e;\n    }\n}\xe2\x80\x8b\n

Run Code Online (Sandbox Code Playgroud)\n\n

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

\n

归档时间：	13 年前
查看次数：	4961 次
最近记录：	13 年前