jquery - Javascript multi click event -
i need have link of output of have done below using javascript , html. http://i.imgbox.com/adlmvtix.jpg need when click on 1 circle other circle should disabled , 1 clicked should active..the problem when click on circle , click one..both stays active..
this javascript code have done far,please me out guys appreciate it!
<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> this css code
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; }
i moved css belongs. how beautifully simple javascript is.
jquery:
var $circles = $('.circle','#main'); $circles.on('click',function(){ $circles.removeclass('clicked'); $(this).addclass('clicked').removeclass('blink'); }); 
Comments
Post a Comment