Всего: 190 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0 Из них: Администраторов: 2 Пользователей: 185 Модераторов: 0 Забаненных: 0 VIP: 1Из них: Парней: 184 Девушек: 6
Я хочу поделиться с вами очередным небольшим jQuery-скриптом, который поможет украсить ваш веб-ресурс. Установка
Код скрипта выглядит следующим образом:
Code
(function($){ $(function() {
$('span.jQtooltip').each(function() { var title = $(this).attr('title'); if (title && title != '') { $(this).attr('title', '').append('<div>' + title + '</div>'); var width = $(this).find('div').width(); var height = $(this).find('div').height(); $(this).hover( function() { $(this).find('div') .clearQueue() .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { $(this).find('div') .animate({width: width + 20, height: height + 20}, 150) .animate({width: 'hide', height: 'hide'}, 150); } ) } })
}) })(jQuery)
Сохраните его в файл с расширением .js, например, scripts.js и подключите к сайту перед тегом , не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:
В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т.е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.
Вот, собственно, и все.
P.S. Не сомневаюсь, что скрипт можно сделать и более грамотным, но меня, в принципе, устраивает и то, что получилось.