0

以下は私のプロジェクトのサンプルスクリーンショットです...

http://i.imgur.com/D60mEG9.jpg

黄色のボールはクリックするまで点滅し続け、クリックすると黄色のボールが青くなり、ボックスもビデオといくつかの画像でポップアップします...ボールがクリックされたときにjavaScriptアニメーションを追加する必要があります。美しいアニメーションで滑り込みます。私は何度も試してみましたが、うまくいきませんでした。

みんな助けてください。

これはボックスの CSS です。

#mainbox {
    background-color:#084679;
    height: 290px;
    width: 497px;
    position:absolute;
}
#videobox {
    background-color:#084679;
    height: 169px;
    width: 300px;
    left: 15px;
    top: 19px;
    float: left;
    position: absolute;
}
#smallbox1 {
    background-color: #0dd4d7;
    height: 62px;
    width: 110px;
    left: 15px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox2 {
    background-color: #0dd4d7;
    height: 62px;
    width: 110px;
    left: 136px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox3 {
    background-color:#0dd4d7;
    height: 62px;
    width: 110px;
    left: 257px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox4 {
    background-color:#0dd4d7;
    height: 62px;
    width: 110px;
    left: 378px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox5 {
    background-color: #084679;
    height: 62px;
    width: 110px;
    left: 330px;
    top: 60px;
    float: left;
    position: absolute;
}

これはJavaScriptです

$('#c1').click(function () {
                setPos();

                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');
                clearCircle()


                $(this).removeClass("blink1");
                //$(this).addClass("blink1");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');

                $(this).css('top', 90 - ((190 - 60) / 2));
                $(this).css('left', 120 - ((190 - 60) / 2));

                $(this).css('background-image', 'URL(assets/images/blue_back.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '160px');
                $('#mainbox1').css('left', '165px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })

            $('#c2').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                $(this).removeClass("blink2");
                // $(this).addClass("blink2");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 360 - ((190 - 60) / 2));
                $(this).css('left', 665 - ((190 - 60) / 2));
                $(this).css('background-image', 'URL(assets/images/1.png)');
                $('#mainbox1').hide();
                $('#mainbox').hide();
                $('#mainbox').css('top', '440px');
                $('#mainbox').css('left', '200px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c3').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 721 - ((190 - 60) / 2));
                $(this).css('left', 206 - ((190 - 60) / 2));
                $(this).removeClass("blink3");
                // $(this).addClass("blink3");
                $(this).css('background-image', 'URL(assets/images/2.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '785px');
                $('#mainbox1').css('left', '265px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c4').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()

                $(this).css('z-index', '1');
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 500 - (
                (190 - 60) / 2));
                $(this).css('left', 661 - ((190 - 60) / 2));
                $(this).removeClass("blink4");
                //$(this).addClass("blink4");
                $(this).css('background-image', 'URL(assets/images/3.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '550px');
                $('#mainbox1').css('left', '738px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c5').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 154 - ((190 - 60) / 2));
                $(this).css('left', 1291 - ((190 - 60) / 2));
                $(this).removeClass("blink5");
                //$(this).addClass("blink5");
                $(this).css('background-image', 'URL(assets/images/5.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '223px');
                $('#mainbox').css('left', '820px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c6').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 309 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink6");
                // $(this).addClass("blink6");
                $(this).css('background-image', 'URL(assets/images/6.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '390px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c7').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color','#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 608 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink7");
                // $(this).addClass("blink7");
                $(this).css('background-image', 'URL(assets/images/7.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '680px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

            $('#c8').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 711 - ((190 - 60) / 2));
                $(this).css('left', 1635 - ((190 - 60) / 2));
                $(this).removeClass("blink8");
                // $(this).addClass("blink8");
                $(this).css('background-image', 'URL(assets/images/8.png)');

                $('#mainbox').show();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '785px');
                $('#mainbox').css('left', '1170px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

        })

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function ResetCircle() {
            $('.circle').css('width', '60px');
            $('.circle').css('height', '60px');
        }

        //<!--  Postion tags-->

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function setPos() {

            if ($('#c1').width() == 190) {
                $('#c1').css('top', 90);
                $('#c1').css('left', 120);
                $('#c1').addClass("blink1");
            }
            if ($('#c2').width() == 190) {
                $('#c2').css('top', 360);
                $('#c2').css('left', 665);
                $('#c2').addClass("blink2");
            }

            if ($('#c3').width() == 190) {
                $('#c3').css('top', 721);
                $('#c3').css('left', 206);
                $('#c3').addClass("blink3");
            }

            if ($('#c4').width() == 190) {
                $('#c4').css('top', 500);
                $('#c4').css('left', 661);
                $('#c4').addClass("blink4");
            }

            if ($('#c5').width() == 190) {
                $('#c5').css('top', 154);
                $('#c5').css('left', 1291);
                $('#c5').addClass("blink5");
            }

            if ($('#c6').width() == 190) {
                $('#c6').css('top', 309);
                $('#c6').css('left', 1488);
                $('#c6').addClass("blink6");

            }

            if ($('#c7').width() == 190) {
                $('#c7').css('top', 608);
                $('#c7').css('left', 1420);
                $('#c7').addClass("blink7");
            }

            if ($('#c8').width() == 190) {
                $('#c8').css('top', 711);
                $('#c8').css('left', 1635);
                $('#c8').addClass("blink8");
            }
        }
4

2 に答える 2

1

最高かつ最も簡単な jquery アニメーションまたは効果は jquery ui です。ここでは、例と .js ファイルを見つけることができます

http://jqueryui.com/effect/

于 2013-08-18T18:32:24.823 に答える
0

配置だけでなくアニメーションが必要な場合は、次のよう.animate()に の代わりに.css()使用します。

function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) {

    TheSelector.animate({ top: SomeTopValue,
                          left: SomeLeftValue
                          width: SomeWidthValue,
                          height: SomeHeightValue}, 500);
}

そして、それを使用するには、このタイプの変更を頻繁に行っているように見えるので、セレクターキャッシングを使用して、これと同じように呼び出します。

TheSelector = $(this); //or TheSelector = $('#mainbox1'); or another element
TheTop = 721 - ((190 - 60) / 2);
TheLeft = 206 - ((190 - 60) / 2);
TheHeight = 190;
TheWidth = 190;

AnimatePosition(TheSelector, TheTop, TheLeft, TheWidth, TheHeight);

役立つ提案:セレクターをチェーンしてキャッシュします!

このようなものを書くとき：

$('#mainbox').hide();
$('#mainbox').css('top', '440px');
$('#mainbox').css('left', '200px');
$('#mainbox').css('z-index', '');
$('#mainbox').show();

あなたはこれを書くことができます：

var mainbox = $('#mainbox');または、すべての行var This = $(this);を再評価する必要がないようにします。実際、あなたの場合、連鎖を使用してこれを書く必要があります（オブジェクトを取ることもできることに注意してください）：$('#mainbox')$(this).css()

$('#mainbox').hide()
             .css({'top': '440px', 'left': '200px', 'z-index': '' })
             .show();
于 2013-08-18T16:11:25.573 に答える