English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Эффект таков:
Рисунок (1) Закрыто
Рисунок (2) Раскрыто
Код如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{ margin: 0; padding: 0; }
.panel {
width: 555px;
height: auto;
background-color: #333333;
margin: 50px auto;
}
.panel-title {
width: 100%;
height: 68px;
text-align: center;
font: 600 18px/68px '微软雅黑';
color: #fff;
cursor: pointer;
}
.collapse {
width: 100%;
height: 0;
background-color: #167EA0;
overflow: hidden;
}
.collapse p {
color: #fff;
font: 500 16px '微软雅黑';
text-indent: 2em;
padding: 20px 20px 0 20px;
}
#One,#Tow,#Three{
border-top: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="panel" id="panel">
<h4 class="panel-title" id="panel-title">1 «Выбор»</h4>
<div class="collapse" id = "One"><p></p></div>
<h4 class="panel-title" id="panel-title">2 «Жизнь»</h4>
<div class = "collapse" id="Tow"><p></p></div>
<h4 class="panel-title" id="panel-title">3 «Размеры»</h4>
<div class = "collapse" id="Three"><p></p></div>
<h4 class="panel-title" id="panel-title">4 « Cultivation »</h4>
<div class = "collapse" id="Four"><p></p></div>
</div>
</body>
<script>
function animate(obj, json, endFn){
// Закрытие предыдущего таймера
clearInterval(obj.timer);
// Управление таймером
obj.timer = setInterval(function(){
// Переключатель таймера, используется для проверки, активирован ли таймер
var flag = true;
// Пробег по json
for(var arrt in json){
// Расчет шага: шаг = целевая позиция - текущая позиция
var step = (json[arrt] - parseInt(getStyle(obj, arrt))) / 5;
// Округление шага
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// Движение коробки: текущее положение коробки + шаг
obj.style[arrt] = parseInt(getStyle(obj, arrt)) + step + 'px';
// Если хотя бы одно из условий не выполнено, не останавливать таймер
if(parseInt(getStyle(obj, arrt)) != json[arrt]){
flag = false;
}
}
// Закрытие таймера
if(flag){
clearInterval(obj.timer);
// Выполнение回调 функции через 2 секунды
setTimeout(function(){
// Проверка наличия回调 функции, если есть endFn, то выполнить функцию回调
endFn && endFn();
}, 1000);
}
}, 20);
}
// Получение текущего стиля
function getStyle(obj, arrt){
// Совместимость с IE
return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj, null)[arrt];
}
var panel = document.getElementById("panel");
var oH = panel.getElementsByTagName('h4');
var oDiv = panel.getElementsByTagName('div');
В жизни человека часто возникает необходимость выбирать, например: в哪个 университет пойти? выбрать какую профессию?娶哪种女子?... и множество других проблем, которые вызывают головную боль. Наличие или отсутствие способности к выбору может показать, насколько зрелой является его личность. Напротив, те, кто не имеет собственного мнения, не страдают от необходимости выбирать. Потому что, когда нужно принимать решение, они всегда спрашивают других: 'Эй, что ты думаешь сделать?' Всякий, кто может достичь больших успехов, обладает сильной способностью к выбору. Он знает, что успех или провал зависит от того, что никого нет, кто мог бы помочь, и никого, кто мог бы принять решение за него. В момент выбора уже露出成败的端倪.もちろん、эта сущность может быть более низменной, слабой и скучной; его обладатель не имеет возможности выбирать. Надо признать, что жизнь - это надежда. Надо сказать, что подлость и пошлость не должны слишком рано гордиться, не должны ошибочно думать, что они успешно уничтожили высокое и истинное. Маскировка также не может быть долговечной, потому что время, как долгая река, медленно冲刷着， и подлые, жадные и пошлые люди не могут всегда носить венки educators, поэтов и воинов. В конце их беззаботной жизни их потомки будут долго чувствовать стыд.
for(var i = 0;i<oH.length;i++){
oH[i].index = i;
oH[i].onclick = function(){
for(var j = 0;j<oH.length; j++){
animate(oDiv[j],{height:0});
}
if(parseInt(getStyle(oDiv[this.index],'height')) == 0){
animate(oDiv[this.index],{height:210});
oDiv[this.index].children[0].innerHTML = str[this.index];
}
animate(oDiv[this.index],{height:0});
}
}
}
</script>
</html>
Это конец статьи, мы надеемся, что содержимое статьи будет полезно для вашего обучения или работы, и также хотим, чтобы вы активно поддерживали tuorial по呐喊!
Декларация: содержимое этой статьи взято из Интернета, авторские права принадлежат их законным владельцам, контент был предоставлен пользователями Интернета, веб-сайт не имеет права собственности, материал не был отредактирован вручную, и не несет ответственности за связанные с этим法律责任. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для жалоб, и предоставьте соответствующие доказательства. Если будет подтверждено, что материалы нарушают права на интеллектуальную собственность, сайт немедленно удалят涉嫌侵权的内容。