Показать сообщение отдельно
  #1 (permalink)  
Старый 07.08.2013, 10:59
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

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>

Последний раз редактировалось cinema4d, 07.08.2013 в 12:36.
Ответить с цитированием