Opacity с помощью slider подскажите!
Гуру ява подскажите нубу хожу вокруг да около есть код взятый с интернета с красивым слайдером но как заставить этот слайдер менять opacity изображения не понимаю тк. знаю css и html но ява для меня пока сложно но очень нужна такая штука вот пример зачем.
ЦЕЛЬ ползунком регулировать opacity стекла тонировки от 0 - 100 тоесть есть картинка под ней гдето ползунок.Картинка есть, ползунок красивый есть, понятия как их связать нет)))) Спасибо зарание всем кто чем то поможет!))) выматало оно меня))
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css">
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}
/*Фон слайдера*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}
/*Стиль кнопки слайдера*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}
/*Элемент div результата, в котором выводится значение слайдера*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}
/*Полоска заполнителя слайдера*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}
a {
outline:none;
-moz-outline-style:none;
}
</style>
</head>
<body>
<div id="container">
<div class="slider"></div>
<div id="slider-result">50</div>
<input type="hidden" id="hidden"/>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 50,
min: 10,
max: 100,
step: 10,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
</script>
</div>
</body>
</html>
|
во-первых. если кидайте пример (полный), так кидайте от <html> до </html>
во-вторых. округлите тэгами [html], так читать приятней.. ну и... наверное же надо библиотеки подключить, как саму jquery, так и модуль слайдера.. |
ааа сори.. либы увидел))
|
вставил))
што скажите Профессор)) я так понимаю в инете нет примеров потому что это просто некуда?))) |
|
а этих то я видел кучу я наверно не так подал тему, я хочу чтобы ползунком можно было регулировать opacity стекла тонировку 0 - 100 тоесть есть картинка под ней гдето ползунок.Картинка есть, ползунок красивый есть, понятия как их связать нет))))
|
так??:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html> <head></head>
<body>
<div style="height: 50px; width: 50px; background-color: red; opacity: 1;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function divChange(ths)
{
div.style.opacity = ths.value / 100;
}
</script>
<div>
<input type="range" min="0" max="100" value="100" onchange="divChange(this);">
</div>
</body>
</html>
п.с. используется html5, работать будет в современных браузерах, например хром |
Да оно только у меня нет ползунка потому что его нет или потому что мозилла, а так да оно и если можно описать как мож хоть чему научусь!!! СУПЕР!!!СПАСИБО!!
|
Цитата:
|
Цитата:
есть библиотеки от jquery http://jqueryui.com/slider/ он кроссбраузерный. подключайте плагин и работает везде)) |
Цитата:
|
та шо там не понятного. все оч легко:
<!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>
|
Цитата:
|
вместо события 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>
|
Цитата:
--- У меня теория что господин хочет менять прозрачность не всего изображения, а только его части. Типа стоит машина, стекла тонированы в ночь. Подходит смИшной такой гаишник, пользователь ползет к ползунку, двигает, и опа - в норме светопропускания. Видно руль, приборы и тьолку. |
| Часовой пояс GMT +3, время: 04:49. |