0

javascript と HTML を使用して以下で行ったことの出力のリンクがあるので、助けが必要です。 http://i.imgbox.com/adlMVTIx.jpg 私がする必要があるのは、1 つの円をクリックすると、他の円が無効になり、クリックされた円がアクティブになることです。円をクリックして別の円をクリックします..両方ともアクティブなままです..

これは私がこれまでに行ったJavaScriptコードです。本当に感謝しています!

<head>
    <title></title>
    <!--scripts-->
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="scripts/main.js" type="text/javascript"></script>
    <!--styles-->
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        $(document).ready(function () {

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

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 243 - ((190 - 125) / 2));
                $(this).css('left', 335 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/blue_back.png)');

            })

            $('#c2').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 898 - ((190 - 125) / 2));
                $(this).css('left', 336 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/1.png)');

            })


            $('#c3').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 470 - ((190 - 125) / 2));
                $(this).css('left', 100 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/2.png)');

            })


            $('#c4').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 800 - ((190 - 125) / 2));
                $(this).css('left', 570 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/3.png)');

            })


            $('#c5').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 165 - ((190 - 125) / 2));
                $(this).css('left', 1287 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/5.png)');

            })


            $('#c6').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 308 - ((190 - 125) / 2));
                $(this).css('left', 1450 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/6.png)');

            })


            $('#c7').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 600 - ((190 - 125) / 2));
                $(this).css('left', 1390 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/7.png)');

            })


            $('#c8').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 820 - ((190 - 125) / 2));
                $(this).css('left', 1720 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/8.png)');

            })
        })

    </script>
</head>
<body>
    <div id="main">
        <div id="c1" class="circle blink">
        </div>
        <div id="c2" class="circle blink">
        </div>
        <div id="c3" class="circle blink">
        </div>
        <div id="c4" class="circle blink">
        </div>
        <div id="c5" class="circle blink">
        </div>
        <div id="c6" class="circle blink">
        </div>
        <div id="c7" class="circle blink">
        </div>
        <div id="c8" class="circle blink">
        </div>
    </div>
</body>
</html>

これは私のcssコードです

body
{
    margin: 0;
    padding: 0;
}
#main
{
    width: 1920px;
    height: 1080px;
    background-image: URL('../assets/images/iwmi-bg.jpg');
}
.circle
{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    border: 5px solid #fdb219; /*box-shadow: 5px 5px #000;*/
    text-align: center;
    background-repeat:no-repeat;
    background-position:center; }

@keyframes blink {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 333.5px; top: 241.5px;  }
}

@-webkit-keyframes blink {
    0% {  width:60px; height:60px;left: 335px; top: 243px; }
    100% { width:65px; height:65px;left: 333.5px; top: 241.5px;  }
}

.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
} 

@keyframes blink1 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 332.5px; top: 240.5px;  }
}

@-webkit-keyframes blink1 {
    0% {  width:60px; height:60px;left: 336px; top: 898px; }
    100% { width:65px; height:65px;left: 333.5px; top: 895.5px;  }
}

.blink1 {
    -webkit-animation: blink1 .75s linear infinite;
    -moz-animation: blink1 .75s linear infinite;
    -ms-animation: blink1 .75s linear infinite;
    -o-animation: blink1 .75s linear infinite;
    animation: blink1 .75s linear infinite;
} 

#c1
{
    left: 335px;
    top: 243px;
}
#c2
{
  left: 336px;
  top: 898px;  
}
#c3
{
  left: 100px;
  top: 470px;  
}
#c4
{
  left: 570px;
  top: 800px;  
}
#c5
{
  left: 1287px;
  top: 165px;  
}
#c6
{
  left: 1450px;
  top: 308px;  
}
#c7
{
  left: 1390px;
  top: 600px;  
}
#c8
{
  left: 1720px;
  top: 820px;  
}
4

1 に答える 1

1

そのCSSをすべて、それが属する場所に移動しました。ここで、JavaScript がいかに美しくシンプルであるかを見てください。

http://jsfiddle.net/8NN4x/

jQuery:

var $circles = $('.circle','#main');
$circles.on('click',function(){
    $circles.removeClass('clicked');
    $(this).addClass('clicked').removeClass('blink');    
});
于 2013-08-13T04:23:03.987 に答える