Форум Сайтостроение Веб-строительство

Скрипт скрыть\показать часть изображения

NoID
На сайте с 03.05.2010
Offline
18
NoID
2364

Доброго времени суток.

Подскажите пожалуйста скрипт, или может стилями (хотя что-то верится с трудом), как скрыть часть картинки. Часть изображения, допустим все что ниже 400px, скрывается под хайдом с кнопкой, при нажатии которой, соответственно, низ становится видимым.

Вообщем, как на http://joyreactor.cc/

Ну или хоть название подскажите, куда рыть. Я то искал, но как эта штука называется не знаю.

C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

картинку засунуть в блок

блоку указать нужную высоту

сделать кнопку, которая меняет высоту блока с картинкой на максимальную(100%)

А скрипт называется "прямые руки"

NoID
На сайте с 03.05.2010
Offline
18
NoID
#2

Спасибо, хороший совет. Подскажите, если не трудно, как сделать кнопку. Я пока нашел только такое: 


<FORM>

<input TYPE="button" VALUE=" Изменить цвет " onClick="BgButton()">

<script>

function BgButton(){

if (document.bgColor=='#adff2f')

{document.bgColor='#ffffff';}

else{document.bgColor='#adff2f';}

}

</script>

</FORM>

Это с цветом, а как быть с блоком и длинной?

C
На сайте с 04.02.2005
Offline
291
Chukcha
#3

кнопка это условное название

это может быть ссылка, блок, в конце-концов даже button

как быть с блоком и длинной?

примерно так

element.style.height =

или

с использованием jquery

$(elemnt).css('heght':'NNN');

М
На сайте с 08.02.2006
Offline
59
Магнат
#4

Как-то так. Работоспособность не проверял. Для понимания логики достаточно.


<style>
	.item {
		max-height: 300px; overflow: hidden;
	}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('.item .holder').each(function(){
		var holder = $(this);
		var parent = $(this).parent('.item');
		if(holder.height() > parent.height()) {
			parent.after($('<button>Открыть</button>').on('click',function(){
				parent.height(holder.height());
				return false;
			}));
		}
	});
});
</script>

<div class="item">
	<div class="holder">
		<img /><br />
		<img /><br />
		<img /><br />
		<img /><br />
		<img />
	</div>
</div>

<div class="item">
	<div class="holder">
		<img /><br />
		<img /><br />
		<img /><br />
		<img /><br />
		<img />
	</div>
</div>

<div class="item">
	<div class="holder">
		<img /><br />
		<img /><br />
		<img /><br />
		<img /><br />
		<img />
	</div>
</div>
NoID
На сайте с 03.05.2010
Offline
18
NoID
#5

Спасибо за ответы. Чет я затупил, решение совсем же несложное. Если кому надо, вот что получилось. Без кнопки, но смысл ясен.

<html>
<head>
<title>11</title>
<style>

.lom {
float:left;
max-height: 200px;
overflow:hidden;
position:relative;
opacity: 0.7;
filter: alpha(opacity=70);
}

.lom:hover {
float:left;
max-height: 200px;
overflow:hidden;
position:relative;
opacity: 1.0;
filter: alpha(opacity=100);
}

.lom:active {
float:left;
height: 100%;
max-height: 100%;
overflow:hidden;
position:relative;
opacity: 1.0;
filter: alpha(opacity=100);
}

.lomclicked {
float:left;
height: 100%;
max-height: 100%;
overflow:hidden;
position:relative;
opacity: 1.0;
filter: alpha(opacity=100);
}

</style>
</head>
<body>


<div class="lom" onmouseup="this.className='lomclicked';"><img src="iphone.jpg" /></div>


</body> 
</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий