|
|
26.05.2012, 16:21
|
|
Интересующийся
|
|
Регистрация: 26.05.2012
Сообщений: 16
|
|
|
Помогите с небольшим эффектом на JS. При наведении курсора..
Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.
Есть темная картинка и такая же, но светлая. Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую. Как такое можно реализовать в JS?
Заранее спасибо.
|
|
26.05.2012, 16:46
|
|
Интересующийся
|
|
Регистрация: 26.05.2012
Сообщений: 16
|
|
я знаю, что можно на CSS. но мне надо, чтобы это было плавно, красиво  |
|
26.05.2012, 17:36
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
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>
|
|
26.05.2012, 17:44
|
|
Интересующийся
|
|
Регистрация: 26.05.2012
Сообщений: 16
|
|
|
Deff, неплохо, а как с кроссбраузерностью?
|
|
26.05.2012, 23:53
|
|
Аспирант
|
|
Регистрация: 03.02.2012
Сообщений: 67
|
|
<!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>
Последний раз редактировалось frant32, 27.05.2012 в 00:10.
|
|
27.05.2012, 01:15
|
 |
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
|
Deff,
Вы ms (префикс) забыли
|
|
27.05.2012, 01:51
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Раед,
 А чо эт такое, просто от сохи - в терминах не оч. силён, (*Ткните пальцем
|
|
27.05.2012, 01:55
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши,
хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания
|
|
27.05.2012, 01:56
|
|
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
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>
|
|
27.05.2012, 02:07
|
|
Аспирант
|
|
Регистрация: 03.02.2012
Сообщений: 67
|
|
Сообщение от Deff
|
frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши,
хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания
|
Да на мелкой не заметно )))
Но ТС то задал Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую.
Не стал заморачиватся на обратном))) хотя +3 строчки ради большего эффекта - ничто...
Последний раз редактировалось frant32, 27.05.2012 в 02:15.
|
|
|
|
