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

Войти
Правила Реклама
 
5
10
15
Свежие ответы
от lyalechka (Контент, копирайтинг, переводы)
от seed4me (Покупка-продажа)
от DreamSupport (Реклама и доход)
от Redtram (Тизерные и баннерные сети)
от advgeneration (Работа и услуги)
от lirinawi (Сайты)
от Advelink (Платное размещение статей и ссылок)
от m1pluss (Соц.группы)
от BeeWoman (Ищу копирайтера, редактора, контент-менеджера)
от salemed (SMM для сайта)
от Ивица (Привлечение и удержание посетителей)
от MoreneHost (Хостинг)
от Yula (Обмен ссылками)
от seagull (Продвинем вместе )
от Крошка Лу (Наши детки)
Свежие темы
Показать ещё
  Печать  
Страниц: 1
Автор

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

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