\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
\\\\\\\\\\\\\\\\\\\\\\
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22020-08-21 13:54:36
Код:
<!--HTML--> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div id="main-img"> <div class="coca-cola"></div><div class="hot-dog"></div><div class="pop-corn"></div><div class="aircraft"></div><div class="lily"></div> <div class="statuss"></div> </div> </div> <style> #main-img { background-image: url(https://i.imgur.com/Or7xiyo.jpg); width: 750px; height: 500px; background-size: 100%; position: relative; } .coca-cola { background-image: url(https://i.imgur.com/16FTjBQ.png); width: 100px; height: 100px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 260px; left: 240px; } .hot-dog { background-image: url(https://i.imgur.com/GZZvx58.png); width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 340px; left: 420px; } .pop-corn { background-image: url(https://i.imgur.com/PbEvavf.png); width: 30px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 270px; left: 60px; } .aircraft { background-image: url(https://i.imgur.com/xOTxRJU.png); width: 60px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 10px; left: 270px; } .lily { background-image: url(https://i.imgur.com/f8SXJZQ.png); width: 40px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 400px; left: 270px; } .statuss { font-size: 50px; background-color: #fff; } </style> <script> $( ".lily" ).click(function() { $( this ).slideUp(); $( ".pop-corn" ).click(function() { $( this ).slideUp(); $( ".hot-dog" ).click(function() { $( this ).slideUp(); $( ".aircraft" ).click(function() { $( this ).slideUp(); $( ".coca-cola" ).click(function() { $( this ).slideUp(); $(".statuss").text("Элементы появились"); }); }); }); }); }); </script>
Страница: 1