Javascript-форум - Opacity с помощью slider подскажите!

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Opacity с помощью slider подскажите! (https://javascript.ru/forum/dom-window/40476-opacity-s-pomoshhyu-slider-podskazhite.html)

Цитата:

Сообщение от skrudjmakdak (Сообщение 266282)

не знаю как в мозиле (должно) и в оперке должно, а вот ие8, ие7 точно идти не будет.

есть библиотеки от jquery
http://jqueryui.com/slider/
он кроссбраузерный. подключайте плагин и работает везде))

Все отлично!Правда спасибо за помощь, но я не понимаю как это связать с моим ползунком:cray:

та шо там не понятного. все оч легко:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html>
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<style type="text/css">
	#slider
	{
	width: 200px;
	margin: 40px;
	}
	</style>
	<script>
	$(function() {
	var div = document.getElementsByTagName('div')[0];
	$( "#slider" ).slider(
		{
		min: 0,
		max: 100,
		value: 100,
		change: function(e, ui)
			{
			div.style.opacity = ui.value / 100;
			}
		});
	});
	</script>
</head>
	<body>
		<div style="height: 50px; width: 50px; background-color: red; opacity: 1;"></div>
		<div id="slider"></div>
	</body>
</html>

Цитата:

Сообщение от skrudjmakdak (Сообщение 266296)

та шо там не понятного. все оч легко:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html>
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<style type="text/css">
	#slider
	{
	width: 200px;
	margin: 40px;
	}
	</style>
	<script>
	$(function() {
	var div = document.getElementsByTagName('div')[0];
	$( "#slider" ).slider(
		{
		min: 0,
		max: 100,
		value: 100,
		change: function(e, ui)
			{
			div.style.opacity = ui.value / 100;
			}
		});
	});
	</script>
</head>
	<body>
		<div style="height: 50px; width: 50px; background-color: red; opacity: 1;"></div>
		<div id="slider"></div>
	</body>
</html>

Спасибо что не послали далеко, а как чтоб сразу менялось у меня когда ползунок останавливается опасити меняется тут не animation надо

вместо события change нужно использовать slide
http://api.jqueryui.com/slider/#event-slide

Цитата:

Сообщение от cinema4d (Сообщение 266299)

Спасибо стало получаться!!

Цитата:

Сообщение от skrudjmakdak (Сообщение 266300)

вместо события change нужно использовать slide
http://api.jqueryui.com/slider/#event-slide

Сорри что дастаю тупыми вопросами но может что подскажите!

Нужна помощь

Ребята, помогите все грамотно «обернуть», у меня выходит коряво, размер окна все ок, а вот в окне ... Как сделать чтобы div в окне и изображение подгонялось под размер окна заданный leghtbox?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>
Leightbox
</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- CSS -->
<link rel="stylesheet" href="http://www.eight.nl/static/files/leightbox/css/screen.css" media="screen,projection" type="text/css" />
<style> 
#PPoverlay
{
position:absolute;
top:0;
}
</style>
<!-- JavaScript -->
<script type="text/javascript" src="http://www.eight.nl/static/files/leightbox/scripts/prototype.js"></script>
<script type="text/javascript" src="http://www.eight.nl/static/files/leightbox/scripts/lightbox.js"></script>

</head>

<body>

<div id="container">


	<p>
		<ul>
			<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Было стало</a></li>
		</ul>
	</p>


</div><!--container-->

<div id="lightbox1" class="leightbox">

<div style="position: relative;">
<div><img src="http://1871.by/pp/image_02.jpg"></div>
<div><input type="range" min="0" max="100" value="100" onchange="ppFunction(this);"></div>
<div id="PPoverlay"><img src="http://1871.by/pp/image_01.jpg" ></div>
</div>
<script>
function ppFunction(ths)
{
document.getElementById("PPoverlay").style.opacity = ths.value / 100;
}
</script>

	<p class="footer">
		<a href="#" class="lbAction" rel="deactivate">Закрыть</a>
	</p>
</div>





</body>
</html>

Цитата:

Сообщение от cinema4d

Да оно только у меня нет ползунка п

Только что был и уже нету.

---

У меня теория что господин хочет менять прозрачность не всего изображения, а только его части. Типа стоит машина, стекла тонированы в ночь. Подходит смИшной такой гаишник, пользователь ползет к ползунку, двигает, и опа - в норме светопропускания. Видно руль, приборы и тьолку.