Главная » 2012 » Март » 16 » JavaScript's: Ссылки и объекты проявляются по мере приближения к...
18:15 JavaScript's: Ссылки и объекты проявляются по мере приближения к... | ||||||||||||
Ссылки и объекты проявляются по мере приближения курсораСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  Ссылки и объекты проявляются по мере приближения курсора через плагин onProximity Fade на jQuery ДЕМО МАТЕРИАЛА Установка: После /head на нужных страницах вставляйте: Code <script src="/js/jquery.onProximityFade-1.0.0.js" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> opf = { farOpacity : 0.05, farDistanceMax : 100, closeOpacity : 1, closeDistanceMin : 0, className : "fadeBox" }; </script> <style> .col { float: left; width: 400px; padding: 100px; line-height: 30px; background-color: inherit; } #boxes { width: 400px; } #boxes li { border: solid 1px #cfcfcf; float: left; display: block; padding: 5px; margin: 0 30px 30px 0; height: 80px; width: 80px; background-color: #efefef; } </style> Следующий код в то место, где будет контент, к которому будет применяться данный эффект: 1) Для ссылок: Code <div class="col"> Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br> Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br> Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br> Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br> Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br> </div> <br clear="all"> 2) Для любого другого контента (К примеру, квадратные области): Code <div class="col"> <ul id="boxes"> <li class="fadeBox">Текст в квадрате</li> <li class="fadeBox">Текст в квадрате</li> <li class="fadeBox">Текст в квадрате</li> <li class="fadeBox">Текст в квадрате</li> <li class="fadeBox">Текст в квадрате</li> </ul> </div> Остаётся лишь залить скрипт из прикреплённого архива в папку js Материал взят с сайта infoscript.ru Теги: Скачать Ссылки и объекты проявляются по мере приближения курсора
| ||||||||||||