Буквально вчера, дизайнер компании, в которой я работаю, спросил – “а можно ли управлять прозрачностью с помощью ползунка”? Разумеется, сказал я, считая что готовых решений в Сети просто пруд пруди. Ан нет. Сам я небольшой спец по части JavaScript, но задача была довольно простая. Ниже выложил решение – надеюсь вам пригодиться. Работает под FF 2.x, Opera 9.x, Safari 3.x, Internet Explorer 6+. Если вам будет нужно, вы без проблем прикрутите поддержку IE 5.5. Посмотреть демо можно тут.
Изобретать колесо я не стал, и взял готовый ползунок, который меня полностью устраивает – это Slider. От него я решил взять верхний ползунок. Меня в принципе устраивает. Единственно, что я не сделал – это не почистил JS файлы от неиспользуемых функций, но думаю вам это будет по силам. Я же просто не определился, что мне из них нужно, а что нет. Потому я прилинковал скрипты с самого примера, не заливая их себе:
<script type=”text/javascript” src=”http://webfx.eae.net/dhtml/slider/js/range.js”></script>
<script type=”text/javascript” src=”http://webfx.eae.net/dhtml/slider/js/timer.js”></script>
<script type=”text/javascript” src=”http://webfx.eae.net/dhtml/slider/js/slider.js”></script>
Стили я тоже не правил, опять же, вы сами с этим справитесь, я их тоже прилинковал с демо:
<link type=”text/css” rel=”StyleSheet” href=”http://webfx.eae.net/dhtml/slider/css/bluecurve/bluecurve.css” />
К слову, вы спокойно можете оформить ползунок по своему разумению.
Из многообразия ползунков я оставил только один, самый верхний:
<div class=”slider” id=”slider-1″ tabIndex=”1″>
<input class=”slider-input” id=”slider-input-1″/>
</div>
Что бы проверить эксперимент, взял картинку, которую я вставлял в пост о социальной сети для блоггеров от СеоКритика:
Ну и собственно реализовал саму смену прозрачности:
<script type=”text/javascript”>
var s = new Slider(document.getElementById(“slider-1″), document.getElementById(“slider-input-1″));
s.onchange = function () {
s.getValueNew = s.getValue()/100;
document.getElementById(“test”).style.filter=”alpha(opacity:”+s.getValue()+”)”; document.getElementById(“test”).style.opacity = s.getValue()/100;
};
s.setValue(50);
window.onresize = function () {
s.recalculate();
};
</script>
Всё работает довольно симпатично. Если приложить руку и немного фантазии, можно сделать очень много интересных эффектов. К примеру этот эффект нужен был для модального окна. Надеюсь вам понравиться, покажу обязательно :)
Ссылки:
Скрипт ползунка – http://webfx.eae.net/dhtml/slider/implementation.html
Демо ползунка – http://webfx.eae.net/dhtml/slider/demo.html
Демо прозрачности с управлением ползунком – http://absolvo.ru/tmp/3/
Павел
Любопытно.