/////////
//////////////
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22020-08-21 11:04:18
Код:
<!--HTML-->
<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 = "status"></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;
}
.status {
font-size: 50px;
}
</style>
<script>
$('.coca-cola').click(function(){
$('.coca-cola').hide('slow', function() {
});
});
$('.hot-dog').click(function(){
$('.hot-dog').hide('slow', function() {
});
});
$('.pop-corn').click(function(){
$('.pop-corn').hide('slow', function() {
});
});
$('.aircraft').click(function(){
$('.aircraft').hide('slow', function() {
});
});
$('.lily').click(function(){
$('.lily').hide('slow', function() {
});
});
$(".status").text("Элементы появились");
</script>
Страница: 1