Хочу рассказать еще об одной задаче, которую мне приходилось решать на jQuery.
Смысл такой:
Был определенный блок на странице (элемент div). Заказчику нужно было, чтобы при наведении курсора мыши на этот блок, рядом с курсором мыши появлялась подсказка. Эта подсказка представляла собой текст на белом фоне. Было важно, чтобы, когда курсор мыши покидал выбранный блок, подсказка исчезала.
В конечном итоге, это должно было выглядеть примерно вот так:
Реализован такой эффект на Javascript и jQuery. Давайте рассмотрим исходный код.
Начнем с HTML содержимого:
<div id="floatingmes">Подсказка</div> <div id="block"></div>
Больше моих уроков по Javascript здесь.
Есть два блока:
Floatingmes – блок с подсказкой, которая будет возникать
Block – Основной блок, при наведении курсора мыши на который, будет возникать всплывающая подсказка.
Стили CSS для этих блоков следующие:
<style type="text/css"> #floatingmes {position:absolute; top:0; left:0; width:100px; background:#FFF; opacity:0.85; border:1px solid #000;} #block {width:500px; height:500px; background:#900;} </style>
И, наконец, скрипты, которые заставляют подсказку двигаться:
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("#block").mousemove( function (pos) { $("#floatingmes").show(); $("#floatingmes").css('left',(pos.pageX+10)+'px').css('top',(pos.pageY+10)+'px'); } ).mouseleave(function() { $("#floatingmes").hide(); }); }); </script>
Для элемента block создается событие mousemove и mouseleave, которые будут выполняться при передвижении курсора по блоку и при уходе мышки из него.
Когда мышка «покидает» блок, подсказка просто исчезает.
$("#floatingmes").hide();
Когда курсор мышки вновь попадает в пределы блока, мы показываем подсказку
$("#floatingmes").show();
И изменяем ее позицию, в зависимости от того места, где находится курсор со смещением, 10 пикслей.
$("#floatingmes").css('left',(pos.pageX+10)+'px').css('top',(pos.pageY+10)+'px');
Алгоритм примерно такой. Надеюсь пример оказался полезным и вы возьмете себе его на вооружение.
Больше моих уроков по Javascript здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти