WEBLEDI.RUВебледи Форум успешных женщин-вебмастеров
23 Сентябрь 2017, 23:16:22 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Правила Реклама
 
5
10
15
Свежие ответы
от Елена12 (Контент, копирайтинг, переводы)
от WantGirls (Финансы)
от Yula (Нужна помощь по сайтам)
от osesakuf (Новичку)
от osesakuf (Yandex)
от osesakuf (Юкоз (ucoz))
от Bukvarix (Сервисы и SEO программы)
от WantGirls (SMM для сайта)
от CPAgetti (CPA-сети)
от WantGirls (Наши сайты)
от Уля67 (Обо всем)
от polyakovka (Мотивация)
от DPavelV (Работа и услуги)
от jemochka (Покупка-продажа)
от Zevss (Обмен ссылками)
Свежие темы
Показать ещё
  Печать  
Страниц: 1
Автор

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

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