Javascript-форум - Помогите с небольшим эффектом на JS. При наведении курсора..

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите с небольшим эффектом на JS. При наведении курсора.. (https://javascript.ru/forum/dom-window/28604-pomogite-s-nebolshim-ehffektom-na-js-pri-navedenii-kursora.html)

bayanruby

26.05.2012 16:21

Помогите с небольшим эффектом на JS. При наведении курсора..

Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.

Есть темная картинка и такая же, но светлая. Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую. Как такое можно реализовать в JS?

Заранее спасибо.

bayanruby

26.05.2012 16:46

я знаю, что можно на CSS. но мне надо, чтобы это было плавно, красиво :)

Deff	26.05.2012 17:36

bayanruby,

<style>
.image.UP,
.image.Down {
   
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   opacity:1.0;
   transition-duration: 0.66s;
  -webkit-transition-duration: 0.66s;
  -moz-transition-duration: 0.66s;
  -o-transition-duration: 0.66s;
}
.image.UP:hover {
opacity:0.00;
   transition-duration: 0.66s;
  -webkit-transition-duration: 0.66s;
  -moz-transition-duration: 0.66s;
  -o-transition-duration: 0.66s;
}

div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>

<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/><img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/><br />
</div>

bayanruby

26.05.2012 17:44

Deff, неплохо, а как с кроссбраузерностью?

frant32

26.05.2012 23:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#pic1 { background:#333333; width:95px; height:37px; z-index:1; position:absolute;opacity:1  }
#pic1:hover{opacity:0;transition-duration: 0.5s;-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;-o-transition-duration: 0.66s;}
#pic2{ z-index:1; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
</head>
<body>
<img src="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" id="pic2" />
<img src="http://www.elogo.ru/gifs/Y/yandex_logo.gif" id="pic1" />
</body>
</html>

Раед	27.05.2012 01:15

Deff,
Вы ms (префикс) забыли

Deff	27.05.2012 01:51

Раед,
:-? А чо эт такое, просто от сохи - в терминах не оч. силён, (*Ткните пальцем

Deff	27.05.2012 01:55

frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши,
хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания

Раед	27.05.2012 01:56

Deff,

<style>
.image.UP,
.image.Down {
    
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   opacity:1.0;
   transition-duration: 0.66s;
  -webkit-transition-duration: 0.66s;
  -moz-transition-duration: 0.66s;
  -o-transition-duration: 0.66s;
 *!*-ms-transition-duration: 0.66s;*/!* /* IE9+ */
}
.image.UP:hover {
opacity:0.00;
   transition-duration: 0.66s;
  -webkit-transition-duration: 0.66s;
  -moz-transition-duration: 0.66s;
  -o-transition-duration: 0.66s;
 *!*-ms-transition-duration: 0.66s;*/!* /* IE9+ */
}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>
 
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/><img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/><br />
</div>

frant32

27.05.2012 02:07

Цитата:

Сообщение от Deff (Сообщение 176782)

Да на мелкой не заметно )))
Но ТС то задал Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую.

Не стал заморачиватся на обратном))) хотя +3 строчки ради большего эффекта - ничто...

Часовой пояс GMT +3, время: 20:28.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице