У меня задание: сделать сайт о погоде, и я хочу чтобы при наведении в конкретной точке изображения отображались данные о погоде конкретного города (Melbourne в моем случае).
И получается так, что если я погоду вывожу не в подсказке она отображается, если в подсказке - не отображается.
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!DOCTYPE html>
<html>
<head>
<title>Travel with weather</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.6.3.min.js"></script>
<script src="js/tips.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<img style="max-width: 100%; height: auto;" width="100%" height="100%" src="https://www.cyberforum.ru/images/weather-world-map.png" alt="Weather map">
<div class="pin pin-down" data-xpos="1100" data-ypos="510">
<h2>Канберра</h2>
<table>
<tr>
<th>Сегодня</th><th>Завтра</th><th>Послезавтра</th>
</tr>
<tr>
<td id="tempToday"></td><td id="tempTomorrow"></td><td id="tempAfterTomorrow"></td>
</tr>
</table>
</div>
</div>
</body>
</html> |
|
Сам вывод погоды (index.js):
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $(function() {
$.getJSON('http://api.openweathermap.org/data/2.5/forecast/daily?q=Melbourne' +
'&units=metric&cnt=3&appid=2de143494c0b295cca9337e1e96b00e0',
function(data) {
$('#tempToday').html(data.list[0].temp.day);
$('#tempTomorrow').html(data.list[1].temp.day);
$('#tempAfterTomorrow').html(data.list[2].temp.day);
$('#pressureToday').html(data.list[0].pressure);
$('#pressureTomorrow').html(data.list[1].pressure);
$('#pressureAfterTomorrow').html(data.list[2].pressure);
$('#iconToday').html('<img src="https://www.cyberforum.ru/images/'+ data.list[0].weather[0].icon + '.png" alt="Weather icon">');
$('#iconTomorrow').html('<img src="https://www.cyberforum.ru/images/'+ data.list[1].weather[0].icon + '.png" alt="Weather icon">');
$('#iconAfterTomorrow').html('<img src="https://www.cyberforum.ru/images/'+ data.list[2].weather[0].icon + '.png" alt="Weather icon">');
}
);
}); |
|
вывод подсказок (tips.js):
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| $(document).ready(function(){
// set the width and height of a container in accordance with the size of the image
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
// direction symbol tips
var tooltipDirection;
for (i=0; i<$(".pin").length; i++)
{
// set the direction of the character tips - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
} else {
tooltipDirection = 'tooltip-up';
}
// add tip
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>");
}
// show/hide tips
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
}); |
|
Скрины:
Кликните здесь для просмотра всего текста
http://i75.***********/big/2015/1220/c5/8fb6a4ab763e4628ccf14ef3131593c5.jpg
(
