О нас Форум Баннеры RSS картинка Нас уже 577, Присоединяйся
Пожаловаться

Представляю скрипт плавного изменения прозрачности баннера при наведении,
При наведении курсора мышки на изображение, картинка постепенно проявляется,
А когда отводим курсор мышки - постепенно угасает.
Получается очень красивый эффект постепенного проявления и угасания.

Также можно не использую скрипт, а только css, добиться похожего результата,
Но плавности уже такой не будет..


Итак начнем с установки скрипта (плавное изменение):

Код ниже вы можете разместить в "Верхнюю часть сайта"
Или перед HTML-кодом объекта, которого вы хотите изменять прозрачность (баннера например):
Код
<script language="JavaScript" type="text/javascript">
var obj,op,proc;

function disappear(x) {
  op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
  if(op > x) {
  clearTimeout(t);
  op -= 0.05;
  proc.innerHTML = Math.round(op*10)/10*100+'%';
  obj.style.opacity = op;
  obj.style.filter='alpha(opacity='+op*100+')';
  t2=setTimeout('disappear('+x+')',20);
  }
}

function transparent(x,x2,obj)
{
  var t,t2;
   
  this.appear = function() {
  var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

  if(op < x) {
  clearTimeout(t2);
  op += 0.05;
   
  obj.style.opacity = op;
  obj.style.filter='alpha(opacity='+op*100+')';
  t = setTimeout(arguments.callee,50);
  }
  }
  this.disappear = function() {
  var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

  if(op > x2) {
  clearTimeout(t);
  op -= 0.05;
   
  obj.style.opacity = op;
  obj.style.filter='alpha(opacity='+op*100+')';
  t2 = setTimeout(arguments.callee,50);
  }
  }
}

</script>


Теперь необходимо картинке или блоку присвоить необходимые свойства:
Код
<img src="ССЫЛКА_КАРТИНКИ" id="imagex1" onmouseover="z = new transparent(1,0.4,this); z.appear();" onmouseout="z.disappear();">


Итак рассмотрим поподробнее:
ССЫЛКА_КАРТИНКИ - думаю ясно (ссылка баннера и т.п.)
id="imagex1" - устанавливаем id баннеру, у второго будет imagex2
В остальное можно сильно не вникать, но нужно лишь значение 0.4
Это будет процент прозрачности после того как отводят мышь (то есть 0.4 это 40%)

Вот для наглядности код второго баннера:
Код
<img src="ССЫЛКА_КАРТИНКИ" id="imagex2" onmouseover="z = new transparent(1,0.4,this); z.appear();" onmouseout="z.disappear();">


И осталось добавить ещё один код после кода баннера,
Например сразу после него, или в "Нижнюю часть сайта"
Код

<script type="text/javascript" type="text/javascript">
for(i=1;i<=2;i++) {
alert(i);
  document.getElementById('imagex'+i).style.opacity = 0.4;
  document.getElementById('imagex'+i).style.filter = 'alpha(opacity=40)';
}
</script>


Тоже его рассмотрим:
'imagex' это как вы надеюсь поняли id картинки (баннера) но без цифры
+i это цифра (например 1 или 2 - зависит от количества баннеров)

0.4 и 40 - процент первоначальной прозрачности картинки
Если у вас баннеров будет например 3,
То в коде ищем i<=2 и цифру 2 меняем на 3

Всё установка скрипта для плавного изменения прозрачности баннера завершена, удачи




Также вы можете обойтись без скрипта, использую только css
Для этого вставляете код ниже в "Таблицу Стилей(CSS)" в конец:
Код
#banners a img {  
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);  
}  

#banners a:hover img {  
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);  
}


Заключаем счётчики или баннеры в div:
Код
<div id="banners">Тут ваши счётчики или баннеры</div>


Всё, готово


Спонсор :



Источник: Не указан
Всего голосов: ... | ... | ...

Всего комментариев: 3
Hаписал: zoma , 10.01.2013 Четверг 09:17 Сообщение #1
OFFLINE
+ 0 -

Fatal1ti| спасибо. все внятно описано. а можно ли значение (1,0.4,this) менять выше например 140% ?

Hаписал: Fatal1ti , 10.01.2013 Четверг 10:29 Сообщение #2
Fatal1ti
Администратор
OFFLINE
+ 0 -

Можно, но это одно и тоже что и 100%

Hаписал: Kulac , 15.01.2013 Вторник 20:19 Сообщение #3
Kulac
OFFLINE
+ 1 -

Эту штуку я много где видел. Полезная, видать

Информация


Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.
Пожалуйста войдите на сайт как пользователь или зарегистрируйтесь.

Логотип сайта:
Навигация
Мини-чат
Витрина Активистов
Опрос
Как вы попали сюда?

Всего ответов: 198
Последние комментарии
  • Fatal1ti
    Оставлен 05.02.2013
    50+ качественных анимированных иконок загрузки для сайта
    Автор комментария: Fatal1ti
    Оставлен 05.02.2013 в 16:19
    Тема: 50+ качественных анимированных иконок загрузки для сайта
    Это просто gif картинки,
    А чтобы при загрузке страницы крутилась анимация, нужен скрипт
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:43
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    С цветами разобрался, пришлось путь к файлу zvetaf.xml полностью писать.
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:32
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Что-то окно с цветами начинает открываться и сразу же пропадает.
    А как можно чат растянуть по высоте с 300рх до 500рх, где это меняется?
  • Mihail
    Оставлен 01.02.2013
    Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    Автор комментария: Mihail
    Оставлен 01.02.2013 в 17:12
    Тема: Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    А вот это супер )
  • Fatal1ti
    Оставлен 31.01.2013
    Форма добавления комментариев как на dle для uCoz
    Автор комментария: Fatal1ti
    Оставлен 31.01.2013 в 18:23
    Тема: Форма добавления комментариев как на dle для uCoz
    Должно работать, у некоторых файл zvetaf.xml
    Повреждается при загрузке, попробуй его перезалить

    Если ничего не изменяется, то ищи в коде такую строчку:
    Код
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="openLayerB('sda',0,'/bbcodes/zvetaf.xml','Выбор цвета',190,200,'1','','',0,'justify');return false;">


    И меняй на эту:
    Код
    <script type="text/javascript" src="http:/serv/zvet.js"></script>
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="viewzvet()">

    Должно заработать..
  • Fatal1ti
    Оставлен 27.01.2013
    Зелёное меню как на we-place для uCoz
    Автор комментария: Fatal1ti
    Оставлен 27.01.2013 в 15:05
    Тема: Зелёное меню как на we-place для uCoz
    DevilShadow, извини что сразу не ответил
    Чтобы счетчики были справа нужно в css найти такую строчку:
    Код
    .coole div {position: relative;margin-left: 173px;z-index: 1;}

    И заменить на эту
    Код
    .coole div {position: relative;margin-left: 219px;z-index: 1;}


    А чтобы и фото счетчик был, нужно после этой строчки:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/6"></script>

    Добавить эту:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/7"></script>


    И после скрипта, который находится снизу после меню, добавь ещё скрипт:
    Код
    <script type="text/javascript">  
      function setCatNumEnt(){  
      if(!window.uCatsOut)return;  
      $('div.naviglot a').each(function(){  
      var a=this,ah=a.href,cArr=window.uCatsOut;  
      if(!/\/photo\//.test(ah))return;  
      var t=ah.split('/'),id=t[t.length-1]||t[t.length-2],a=$(a).parent();  
      if(!isNaN(id)){  
      $.each(cArr,function(j){  
      if(cArr[j][0]==id){  
      a.prepend('</span><div class="coole"><div><span class="vnav-subnav2">'+cArr[j][6]+'</span></div></div>');  
      }  
      });  
      };  
      });  
      };setCatNumEnt();
      </script>
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня зашли на сайт
0 пользователя

Новых пользователей:
За месяц: 17
За неделю: 6
Вчера: 0
Сегодня: 0
У нас нашли
Загрузка...
Друзья сайта
Наш Баннер
Всё для новичков
Всё для новичков