Дополнительный блок с текстом.
Всем Спасибо)
|
Цитата:
|
ksa,
При нажатии на Кнопку(картинку). До конца страниц появляется белая полоска шириной 50px и длиной до конца страницы. После того как она завершит действие. Эта же полоска растягивается на весь экран и появляется текст. |
Agamy, так потом и остается? Или как-то может "сворачиваться" в картинку
|
ksa,
Закрывается на крестик или сворачивается тут уже разницы нет) |
Agamy, вот пример "открытия"...
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: green;
}
.box {
position: relative;
width: 20px;
height: 20px;
overflow: hidden;
background-color: #ffffff;
}
.pict {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url('http://javascript.ru/forum/images/smilies/unsure.gif');
}
.pict.on {
background-image: url('http://javascript.ru/forum/images/smilies/smile.gif');
}
.text {
padding-top: 20px;
}
</style>
<script type='text/javascript'>
$(function (){
$('.pict').click(function (){
var obj=this.parentNode
$(obj).animate(
{width: '100%'},
"slow",
"linear",
function () {
var h=$(obj).height()+$(obj).find('.text').height();
$(obj).animate(
{height: h+'px'},
"slow",
"linear",
function () {
$(obj).find('.pict').addClass('on');
}
);
}
);
});
});
</script>
</head>
<body>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Служба Яндекс.Рефераты предназначена для студентов и школьников,
дизайнеров и журналистов, создателей научных заявок и отчетов —
для всех, кто относится к тексту, как к количеству знаков.
</p>
</div>
</div>
</body>
</html>
</html>
|
Это с открытием и закрытием...
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: green;
}
.box {
position: relative;
width: 20px;
height: 20px;
overflow: hidden;
background-color: #ffffff;
}
.pict {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url('http://javascript.ru/forum/images/smilies/unsure.gif');
}
.pict.on {
background-image: url('http://javascript.ru/forum/images/smilies/smile.gif');
}
.text {
padding-top: 20px;
}
</style>
<script type='text/javascript'>
$(function (){
$('.pict').click(function (){
var obj=this.parentNode
if ($(this).hasClass('on')) {
var h=$(obj).find('.pict').height();
$(obj).animate(
{height: h+'px'},
"slow",
"linear",
function () {
var w=$(obj).find('.pict').width();
$(obj).animate(
{width: w+'px'},
"slow",
"linear",
function () {
$(obj).find('.pict').removeClass('on');
}
);
}
);
} else {
$(obj).animate(
{width: '100%'},
"slow",
"linear",
function () {
var h=$(obj).height()+$(obj).find('.text').height();
$(obj).animate(
{height: h+'px'},
"slow",
"linear",
function () {
$(obj).find('.pict').addClass('on');
}
);
}
);
};
});
});
</script>
</head>
<body>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Служба Яндекс.Рефераты предназначена для студентов и школьников,
дизайнеров и журналистов, создателей научных заявок и отчетов —
для всех, кто относится к тексту, как к количеству знаков.
</p>
</div>
</div>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Нажав на кнопку «Написать реферат», вы лично создаете уникальный текст,
причем именно от вашего нажатия на кнопку зависит, какой именно
текст получится — таким образом, авторские права на реферат принадлежат
только вам.
</p>
</div>
</div>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Текстами рефератов можно пользоваться совершенно бесплатно,
однако при транслировании и предоставлении текстов в массовое
пользование ссылка на Яндекс.Рефераты обязательна.
</p>
</div>
</div>
</body>
</html>
</html>
|
Цитата:
|
Нашелся, не обманул... :yes:
|
Готово, спасибо всем)
|
| Часовой пояс GMT +3, время: 20:04. |