WEBLEDI.RUВебледи Форум успешных женщин-вебмастеров
21 Январь 2017, 19:18:30 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Правила Реклама
 
5
10
15
Свежие ответы
от Laka (Реклама и доход)
от Ninok-sb (Платное размещение статей и ссылок)
от Елена12 (Контент, копирайтинг, переводы)
от Loki_Dex (Особенности работы с разными CMS)
от Петрова (Новичку)
от Bukvarix (Сервисы и SEO программы)
от Loki_Dex (Наши сайты)
от Pomazyka (Семья)
от Loki_Dex (Работа и услуги)
от salemed (Социальные сети)
от Irina0408 (Дизайн)
от FreeZe (Покупка-продажа)
от rusrob (Ищу копирайтера, редактора, контент-менеджера)
от Holly (Тизерные и баннерные сети)
от vuxaru (Пожелания к администрации форума)
Свежие темы
Показать ещё
  Печать  
Страниц: 1
Автор

Тема: Как разукрасить свой сайт с помощью JS (Java Script)  (Прочитано 1786 раз)

0 Пользователей и 1 Гость смотрят эту тему.
GoodShadow
Offline Offline

Пол: Женский
Сообщений: 460


Мур мур :3


Просмотр профиля
« : 19 Декабрь 2011, 16:17:56 »

Наверное часто вам в голову приходит мысль хочу сделать что нибудь красивое для сайта.

Так сказать закавырку что бы не у кого такой не было и при этом не тратя денег так вот я вам на живом перемере покажу плавные цвето-переходы с использованием  JS

Возьмём самый простой пример это всем известный значок RRS:

Берём 2 картинки:

rss.png

rss_h.png


Теперь самый простейший скрипт JS

Цитировать
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> # ниже подгружаем скрипт, чтобы не качать к себе
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
   $(document).ready(function(){
      $(".button .effect").mouseenter(function() {  #функция наведении мыши
         $(this).animate({ opacity: '1' }, "slow");
      }).mouseleave(function() {
         $(this).animate({ opacity: '0.1' }, "slow");
      });
   });
</script>

Дальше у вас пойдёт стиль:

Цитировать
<style type="text/css">
   .button, .button .effect { width:32px; height:32px; }
   .button {
      background:url('rss.png') no-repeat;
   }
   .button .effect {
      background:url('rss_h.png') no-repeat;
      opacity:0.1;
   }
</style>
</head>
<body>
<div class="button">
   <div class="effect"></div>
</div>
</body>
</html>

В итоге получается следующие:

То что получилось (при наведении мышки плавно меняет цвет)

Дальше всё ограничивается вашей фантазией (кнопки, картинки и прочие безделушки можно прикрутить к себе на сайт)


Вопросы которые могли всплыть:
1) весь секрет в том что 1 картинка накладывается на 2-ую и с помощью функции js меняется прозрачность слоя от 1.0 до 0.1
2) количество рисунков не ограничено
« Последнее редактирование: 20 Декабрь 2011, 00:51:30 от GoodShadow » Записан

skype: goodsh_love
Страниц: 1
  Печать  
 
Перейти в:  

| Sitemap