Буквально вчера, дизайнер компании, в которой я работаю, спросил – «а можно ли управлять прозрачностью с помощью ползунка»? Разумеется, сказал я, считая что готовых решений в Сети просто пруд пруди. Ан нет. Сам я небольшой спец по части 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/
Павел
Любопытно.