Главная » 2012 » Март » 16 » JavaScript's: Оригинальная подсветка-указатель любых элементов с...
18:23 JavaScript's: Оригинальная подсветка-указатель любых элементов с... | ||||||||||||
Оригинальная подсветка-указатель любых элементов сайта через плагин Seek на jQueryСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  ДЕМО МАТЕРИАЛА Установка: После /head на нужных страницах сайта вставляйте: Code <script src="/js/jquery.seek.js" type="text/javascript"></script> <script src="/js/jquery.easing.1.3.js" type="text/javascript"></script> <link href="/css/seek-demo.css" rel="stylesheet" type="text/css" /> Сразу после предыдущего кода вставляйте: 1) Для эффекта подсветки формы: Code <script type="text/javascript"> $(function() { $("#btnTestForm").click( function() { $("#fsForm").seek({ css: { borderStyle: "dotted", borderWidth: "1px", borderColor: "Green" }, animation: { speed: 600 } }); }); $("#btnTestForm2").click( function() { $("#txtNome, #txtCognome").seek({ css: { borderStyle: "dotted", borderWidth: "1px", borderColor: "Green" }, animation: { speed: 600 }, startFrom: $("#fsForm") }); }); }); </script> 2) Для подсветки картинок: Code <script type="text/javascript"> $(function() { $("#btnTestImages").click( function () { $("fieldset img").seek({ css: { borderStyle: "solid", borderWidth: "2px" }, animation: { easeFunction: "easeInExpo", speed: 900 }, multiple: { simultaneous: false, interval: 300 } }); }); $("fieldset img").click( function() { $(this).seek({ css: { borderStyle: "solid", borderWidth: "2px" }, animation: { easeFunction: "easeInExpo", speed: 500 } }); }); }); </script> Следующий код в то место, где будут элементы, которые необходимо подсвечивать: 1) Форма: Code <input type="button" id="btnTestForm" value="Кнопка выделения всей формы" /> <input type="button" id="btnTestForm2" value="Кнопка выделения полей формы" /> <fieldset id="fsForm"> <legend>Это ваша форма</legend> <label>Логин <input id="txtNome" type="text" /> </label> <label>Пароль <input id="txtCognome" type="text" /> </label> <input type="button" id="btnSubmit" onclick="javascript:return false;" value="ОК" /> </fieldset> 2) Группа картинок: Code <input type="button" id="btnTestImages" value="Кнопка поочерёдного выделения всех картинок" /> <fieldset id="fsPhotogallery"> <legend>Здесь ваши картинки (Клик по картинке для выделения</legend> <img src="Ссылка на картинку" /> <img src="Ссылка на картинку" /> <img src="Ссылка на картинку" /> <img src="Ссылка на картинку" /> </fieldset> Внимательно всмотритесь в предоставленные коды, изучите соотношения и, когда разберётесь (У меня заняло секунд 30) - сможете выделить абсолютно любой элемент на сайте. Если возникнут какие-либо вопросы - пишите в комментариях Осталось лишь залить два скрипта из прикреплённого архива в папку js и стиль в папку css Материал взят с сайта infoscript.ru Теги: Скачать Оригинальная подсветка-указатель любых элементов сайта через плагин Seek на jQuery
| ||||||||||||