|
Сообщение от krash_laiv
|
|
вот полное содержание скрипта
|
Что-то не все прогнозы.
Не надо так делать - блок Прогноз где-то внизу и виден только после прокрутки, а в него надо помещать. Уж тогда напротив фамилии должно помещаться, а не понять где. Да и вообще, и таблицы тут не нужно, и куча элементов, вместо которых вообще-то должен работать CSS.
Читайте
о стилях. Список фамилий можно вывести и списком, а прогноз загружаемый для каждого при загрузке страницы, показывать/скрывать под ними.
Вместо (Дева) и т.п. можно отображать соответствующие знаки гороскопа, как в примере для двух.
Весь код управления с применением jQuery, это несколько строк:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
background: url(http://www.rudebox.org.ua/demo/animated-background-headers/css/../img/demo-1-bg.jpg) fixed;
background-size: cover;
font: 1em Arial;
}
h1 {
color: #fff;
text-align: center;
text-shadow: 0 0 .4em #000, 0 0 1em #000, 0 0 2em #000;
font: 3.5em serif;
}
ul {
width: 100%;
padding: 0;
list-style: none;
background: none;
}
li {
width: 50%;
min-height: 58px;
padding: 20px 20px 20px 90px;
margin: 10px auto;
background: rgba(255, 255, 255, .75);
border-radius: 5px;
}
.horo {
background-repeat: no-repeat;
background-position: 20px 20px;
}
.virgo {
background-image: url(data:image/gif;base64,R0lGODlhMgA6ALMAAKGQbfvrs//+2wICAurRm/Ddqm9jSllOO7alfs+1g+DEjod5XTUwJc3Dnh0aFUY+MCH5BAAAAAAALAAAAAAyADoAAAT/0A1Jp6346sy1HWAojmRpnqKEruCzLCpLxnJ5NACACEjtyw/BIcQQACY62smh/BWOIoNgURAIGiDHArD41RoLxnDSsAoCgsIEbTXMmj924HUOBKo9dKGKrTGzDCdSZnV2aAwAaXsBBEp/JAcBD5FuJ2WGdgVoCFJ7iwVwJgtWDysOl5l3AQ2anpqNI4+xDgYGDoErUqqema6rPwjBCKEiib13rp5GbyIPpRNWgbeWip+aAgQF2QRTLAs9IA1Yt10lO63J4oza3JUpNAU9pQZdOgjlUWfJe0IDewTZAuAy8SCRgYIDGJQCEK+BrRBBkO3rl+BONlDMJkjY0eMPRwaP/4JU2ydpAAJGBAIkkMGAFRYGgXAYGDjKikRPASVUBBgAyqwUIOgtaDAmCxUrCRic/MdOWzh2c344MEP0WxUrRLO80qYtgAIQ2RqkdPfOxFVCKmc2QwYQYIFx7LINrJEoHgC1JRqg/JftKwNGCgDCkRVrrokdbhskeOv0gdfACoh5EXHOLaemDiI1CNwn42TEi18xWJwt8+N4k1cACOBmgde3DFwrkBRJgQLUJQj76TYAwMoBBw44nj3Jq1ifqUkYQIArh1EGgQsscExgMfKyXsT8eRECACJtPaCDT34CJpODIQwc+BuYQmBwnn+AVPiASaDYAxJkG+M6geTJ8wl3Hv8IMBhwRzkMEBBZbv8RdMt6TJSj3gAA/dZbAYaRB9MQk4DUmwT4UUEALgYWhZ0PtZTywEw6laIFCLNV4oB05I1wUBcHHLSRG/W1oFJ3Fp4IxExdLCBcIN8AFwMl3WU42UEHFLliIAcQMIAL7qwI1E8+HHHXADCE4cADCsC0hYk1QnJEUr315oxSRRowoh8NdvdAgld2wYkzB3wFQHAYpRnLSr6B6QYnUVI45koGLGhKnWAeQaN3JoWxUgJdKDDEAfAJOkCZfwUCThJf9QnmbwihoJsJjZpkJT0ERpbAECPO+EyighZwgANRIVDfiiM6h8Ca8MFqwqokAOBnAEwwmiPEhq1WeYuuISCA5g8HCABTAD049+cBuj4AigMEHGphn04iS0RP+QnkTykETFKALQQMkcBKCRZ172QzvsouAFYmqBABADiAaW/x9nYuwfGNMFtCXq1xhIG3ENDDAowy/KmMCChA1gonrQHLakMAPIEC+Pp1L5WONjqrkCGYyqt/Axg46koGK1AKc70pIKFPjXa6RLOVMFBAmS1UgkC5wG2KsgrrEUGDulcuWXAJcsoIwgEJyAhpjcjW+UgHZG+Qhdllq+BABAA7);
}
.aries {
background-image: url(data:image/gif;base64,R0lGODlhMgA6ALMAAP70xPfntgICAu3crJmPcmVeS///4K2igdbPrMK1j9DBmDc0KuXRn01JPIB3YB0bFyH5BAAAAAAALAAAAAAyADoAAAT/8AlJp6346sy1FWAojmRpnmiqruUjoU0hL2y9Pgdg7PugEI2P7fQaOXiAZNIQGOwOQ+Io2NgplQaF4LBzRFmIx/G6RAgIBh3hayoKAAs0Wc1dAtxsIchQGJMHdVgFeSgAB1VkBgiBS16EIC4iRw0JaVgJcksGNI8mDjROWAgNVwZrnZAtOqVxaYqoqSUKllg+rkGwLYyJOlC5egVWmnMGuLB4VTwBBwnExr8iCGkODws5iQPPj5EiC45ctKWK2isLgCzJc+IBBJwsCwaOsSSZWOo8gAULeCQPBgwh+IWYVSoBAnWa0gRIcMCBPm4guJhJ8WBVowIIAwAIoDGhJR8N/xUk0RKwBDws7YRd0ciSo8uX9nTIEyjgpI4BD6QpabnxpcsBQAc0ARqAgQJ5KGwW87Ozp88mHIUGBQqApAiI3VwhMGeJo9OnUqdOLUqzhDQ+VVj2/BoVatipDIq2MAFvU6aWYN2KHcCAL4AE/U4s6PPACV6fUofu7cuAAQCkKgqYQfT0p+LFjPsGcHf1BIKjTJIgHno5aObGhuYKVph3r2m+fBtr5lwDTYB4R9yWBnpatuNT/cqCcMLnze7XsXnLHkDbRoEBgwSIfEtUdFGjypehEA6CgIIDgw0EvTKAQIEHBDgeYhwAcmcVdROYg+oQSJEFHLUUKNq+k21rGzFAU9ozJCkQly9tlJNEAw4kAZgJOfiSXmPNzaNCJQ0skARwJOTgiANNPPjIEeclEV0/InHigFAnBsdCMINoRA4IpIh4QABWPVJFEI5VeAYA0T0Ql3sjcBcCKTTEJZCGAIHQYI6qrYCRBHyZ0EyQCgQwIxsEDDDBXyU0KCIBqalg5HBQkMIhjRxFtx8DPr4HH5ACkFhklg8+F0CLjyzgGAgiaSPSYwI0MAAAaxLB3TVQYCTgVQ4QQAAFD5x3TEdBaJRoJ9w9wCAIhEFzJjSk/jJqqQG90MGqG7TKKgcRAAA7)
}
.horo:hover {
background-color: rgba(255, 255, 255, .85);
}
h2 {
margin: 0;
font-size: 1.3em;
}
h2 a {
float: right;
cursor: pointer;
font-size: .7em;
}
.forecast {
display: none;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var horoscope = {
//Овен
'aries' : 'Ваша удачливость в этот период не подлежит сомнению. Однако в данные сутки настоятельно рекомендуется принять меры, предохраняющие от внезапных ударов из-за угла.',
//Лев
'leo' : '?',
//Стрелец
'sagittarius' : 'Ваши партнёры в данный период в большой степени зависят от вас.Не будьте слишком жестки, проявите по отношению к ним понимание, избегайте вспыльчивости, иначе в будущем (не таком уж и далеком) сами выроете себе яму и дадите против себя оружие',
//Телец
'taurus' : '?',
//Дева
'virgo' : 'Партнёр по браку или деловой компаньон в эти сутки способен повести себя странным образом. Не исключено, что он (она) будет демонстрировать вам главным образом негативные стороны своего характера.',
//Козерог
'capricorn' : 'Ваши отношения с родственниками, деловыми партнёрами, коллегами, помощниками, клиентами, а также с идеологическими противниками в эти сутки могут обостриться до предела.',
//Близнецы
'gemini' : '?',
//Весы
'libra' : '?',
//Водолей
'aquarius' : '?',
//Рак
'cancer' : 'Избегайте чересчур активного включения в чужие дела, осторожнее оказывайте услуги другим людям, иначе этот день доставит вам не только положительные, но и неприятные ощущения.',
//Скорпион
'scorpio' : 'Какие бы неприятности ни поджидали вас на пути к цели, вы можете надеяться на удачное завершение предпринятого дела. Однако удовлетворительных результатов вам придётся подождать. Возможно, вы увидите положительные плоды своих усилий лишь на следующий день.',
//Рыбы
'pisces' : 'Фортуна на вашей стороне. Если вы знаете, чего хотите, преследуете достойные и оригинальные цели, то в конце концов победите (возможно, в эти сутки, а возможно, и на следующий день).'
};
$(function() {
$('li.horo').each(function() {
$('<div class="forecast"/>').text(horoscope[this.className.split(' ').pop()]).appendTo(this)
});
$('ul').on('click', 'a', function() {
var b = $(this);
b.closest('li').find('.forecast').slideToggle(500, function() {
b.text(['Скрыть', 'Прогноз'][+$(this).is(':hidden')])
})
});
});
</script>
</head>
<body>
<h1>Гороскоп</h1>
<ul>
<li class="horo virgo"><h2>Александрова Анна <small>(Дева)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Баландин Илья <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo aquarius"><h2>Бурданова Алёна <small>(Водолей)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Вахрушев Евгений <small>(Весы)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Гурьев Кирилл <small>(Весы)</small><a>Прогноз</a></h2></li>
<li><h2>Давыденко Владимир <small>(отсутствует дата рождения)</small></h2></li>
<li class="horo capricorn"><h2>Ермакова Оливия <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Игнатович Павел <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo scorpio"><h2>Истомин Дмитрий <small>(Скорпион)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Кабанова Александра <small>(Весы)</small><a>Прогноз</a></h2></li>
<li><h2>Кузмич Елена <small>(отсутствует дата рождения)</small></h2></li>
<li class="horo scorpio"><h2>Лямин Богдан <small>(Скорпион)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Мирошниченко Станислав <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Пескова Елизавета <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo virgo"><h2>Повареных Ангелина <small>(Дева)</small><a>Прогноз</a></h2></li>
<li class="horo cancer"><h2>Полякова Полина <small>(Рак)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Попова Юлия <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo capricorn"><h2>ПаТиМеЙкЕр <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li><h2>Скороходов Роман <small>(отсутствует дата рождения)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Стариков Владимер <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Сусанова Алина <small>(Весы)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Усатов Родион <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Фокин Кирилл <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo capricorn"><h2>Фокина Вика <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Шнанаурин Олег <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo taurus"><h2>Яшкова Ксения <small>(Телец)</small><a>Прогноз</a></h2></li>
</ul>
</body>
</html>