WEBLEDI.RUВебледи Форум успешных женщин-вебмастеров
11 Декабрь 2016, 13:59:19 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Правила Реклама
 
5
10
15
Свежие ответы
Re: Качественные статьи по доступным ценам от Oleg10 (Контент, копирайтинг, переводы)
Re: Марафон Спарта от Пузата - Почему я иду от Кукла в бантиках (Обучение сайтостроению, SEO и заработку)
Re: Предоставляю услуги по верстке, программированию и поддержке ваших сайтов от Деверо (Работа и услуги)
Re: Advertur — заработай на своем сайте, размещая RTB рекламу! Официальная группа! от Fantana (Реклама и доход)
Требуется помощник редактора сайта от Клим (Ищу копирайтера, редактора, контент-менеджера)
Re: Размещу качественный контент бесплатно от Mashuly (Обмен ссылками)
Re: Кем будет востребована информация о благосостоянии клиента? от АТВ (Привлечение и удержание посетителей)
Медицинская партнерка с уникальными методиками от sexolog (CPA-сети)
Как рассчитывается итоговый доход Адсенса? от anlw (Google AdSENSE)
Re: Наполнение групп Вконтакте от Posting_i_PIAR (Социальные сети)
Услуга в соц.сетях: поиск аккаунтов по номеру телефона или email. от Max-Payne (Покупка-продажа)
Re: Проблема с дизайнером от Mara (Дизайн)
Re: Апа не будет до конца лета? от larisay (Yandex)
Re: Хостинг FairyHosting.com от vladislavd (Хостинг)
Re: как сейчас с высококонкурентной тематикой для новых сайтов? от Ивица (Раскрутка сайтов в поисковиках)
Свежие темы
Показать ещё
  Печать  
Страниц: 1
Автор

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

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