Loading





Форекс с Альпари

eTXT




Анкетка


Прозрачность элементов на jQuery

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.


В данном уроке я хочу представить «на ваш суд» эффект прозрачности картинки и текста. Эффект, мне кажется, неплохой и достоин рассмотрения. Служит он, конечно же, как и многие другие эффекты, для привлечения несколько большего внимания посетителей вашего сайта к той или иной части текста или к какому-либо изображению.

Для реализации такого эффекта на вашем сайте необходимо:

1. СКАЧАТЬ ИСХОДНИКИ (91 кб)

2. Распаковать архив в текущую папку на компьютере. В папке transparency Вы увидите:

  • папку images с изображением;
  • папку js с jQuery;
  • файл demo1.html;
  • файл demo2.html.

3. В используемом вами браузере поочередно откройте файлы demo1.html и demo2.html, проверьте работу скрипта.

4. Содержимое папок images и js закачайте в одноименные папки своего сайта. Эти папки находятся в корневой папке сайта. Если таковых у Вас не оказалось, их нужно создать.


Прозрачность картинки на jQuery


Демо-пример:

Кристина Агилера

Вставка кода на страницу сайта

Участок кода подключения jQuery
(<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>)
и скрипт из файла demo1.html, который представлен в таблице внизу вставляем в head. Можно вставить и в body всю ниже представленную конструкцию целиком, так как скрипты можно располагать в разных вариантах. К примеру у Вас сайт на PHP и нет особого желания загромождать файл HEADER одноразовыми скриптами.

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на день публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.limp').each(function(){
    $(this).animate({opacity:'0.3'},1);
     $(this).mouseover(function(){
     $(this).stop().animate({opacity:'1.0'},600);
   });
   $(this).mouseout(function(){
   $(this).stop().animate({opacity:'0.3'},300); 
   });
});
});
</script>

          Путь к файлу библиотеки jQuery;

          В данной строке limp - название класса для создания прозрачности;

          В этой строке задаётся начальная прозрачность элемента;

          В данной строке задаётся прозрачность элемента при наведении курсора;

          В этой строке задаётся прозрачность при уходе курсора с элемента.


А код изображения вставляем в body в определённое вами место:


<img src="images/изображение.jpg" class="limp" vspace="XX" hspace="XX"  
width="XXX" height="XXX" alt="Название">

          Здесь прописать путь к картинке, отступы, размеры и название. Всё!




Прозрачность текста на jQuery


Демо-пример:

My Site is a personal site that gives you a central location to manage and store your documents, content, links, and contacts. My Site serves as a point of contact for other users in your organization to find information about you and your skills and interests. Content providers can use My Site as a method of customizing the information they present to users.

My Site is a personal site that gives you a central location to manage and store your documents, content, links, and contacts. My Site serves as a point of contact for other users in your organization to find information about you and your skills and interests. Content providers can use My Site as a method of customizing the information they present to users.


Вставка кода на страницу сайта:

Здесь все действия аналогичны первому варианту. Только лишь, вместо кода картинки вставляем код с текстом (в таблице внизу) - в нужное место раздела body:


<div class="limp">
<p>
My Site is a personal site.
</p> 
<p>
My Site is a personal site.
</p> 
</div>

          Здесь пишите ваш текст.

Спасибо за внимание. Комментируйте статью. Всего Вам доброго. До скорой встречи! С уважением, Л.М.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка