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>

この例にはエラーがあることを私は知っています。なぜなら、スライダー上にマウスを置いた状態で長いドライブを行うと、「激しく」実行され始めるからです:)アニメーションの速度を意図的に下げました。

誰かがこれを正しく実装する方法について私にいくつかのガイダンスを与えることができますか？

4

2 に答える 2

1

これが純粋なJS実装です-JSFiddleリンク。フィドルが保存されなかった場合のために、ここに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;
    }
}​

少し作業が残っていると思います。アニメーションの速度が十分でないため、アニメーションの実行中に別のセクションにマウスオーバーすることができます。私はあなたにそのビットを任せます:)

于 2012-10-24T18:31:46.247 に答える
1

多くの時間を節約したい場合は、jQueryを使用して行う必要があります。このhttp://jsfiddle.net/QXRVb/ソリューションを試してください。その例では、divのサイズを変更することを好みませんでした。Z-indexesとjQueryanimateを使用してそれらを移動しました。そうすれば、彼らのために正しい位置を作るのがより簡単になります。

<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内に画像タグを簡単に配置できます。

于 2012-10-24T18:47:16.560 に答える