Сейчас: 17:33:11   28-го марта 2024 г.
UsefulScript.ruСкриптыГрафикаИзменение прозрачности картинки
43
152

Плавное изменение прозрачности картинки

Предлагаем Вашему вниманию скрипт плавного проявления картинки (изменения прозрачности изображения) при наведении на нее курсора мышки.


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


Чтобы понять как работает предлагаемый нами скрипт, наведите курсор мышки на одно из изображений, расположенных ниже:


Обычная картинка
(прозрачность 0%)
Прозрачность 50% Прозрачность 90% Пример прозрачности
контейнера SPAN
Пример: плавное изменение прозрачности картинки

100%
Пример: плавное изменение прозрачности картинки

50%
Пример: плавное изменение прозрачности картинки

10%
В IE данный пример
с контейнером SPAN
не работает!


40%

Для получения эффекта плавного изменения прозрачности картинки, поместите JavaScript код, приведенный ниже, в начало Вашей странички:

JavaScript код:
<script type="text/javascript">
var 
tt2opproc;

function 
transparent(xx2objpid) {
    var 
proc document.getElementById(pid);
    
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;
            
proc.innerHTML Math.round(op*10)*10 "%";
            
obj.style.opacity op;
            
obj.style.filter "alpha(opacity=" op*100 ")";
            
setTimeout(arguments.callee50);
        }
    }
    
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;
            
proc.innerHTML Math.round(op*10)*10 "%";
            
obj.style.opacity op;
            
obj.style.filter "alpha(opacity=" op*100 ")";
            
t2 setTimeout(arguments.callee50);
        }
    }
}
</script>

Изображения, прозрачность которых необходимо изменять, описываем следующим образом:

HTML код:
<img src="image/transparent.gif" width="150" alt="logo" id="image_2"
onmouseover="z = new transparent(1,0.1,this,'p5'); z.appear();"
onmouseout="z.disappear();">
<
br><br>
<
b id="p5">10%</b>

И в конце странички (после вывода картинок с эффектом плавного изменения прозрачности) необходимо задать начальное значение прозрачности для каждого изображения или текстового блока в отдельности. Делается это следующим образом:

JavaScript код:
<script type="text/javascript">
 
document.getElementById("image_1").style.opacity 0.5;
 
document.getElementById("image_1").style.filter "alpha(opacity=50)";

 
document.getElementById("span_5").style.opacity 0.4;
 
document.getElementById("span_5").style.filter "alpha(opacity=40)";
</script>
Дата создания: 23:04:18 20.06.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 17455 раз(а).

Комментарии посетителей (5 шт.):
Сергей
0
# 1310
(10:25:56  30.11.2013 г.)

Здравствуйте! Подскажите, пожалуйста. Использую приведённый код, - всё работает замечательно. Но как только добавляю фоновую картинку, изображение после единократного на него наведения появляется, а затем не исчезает полностью (остаётся полувидимым). Во всех браузерах именно так, кроме IE 10, в нём работает всё как надо.
Ответить

Семен
0
# 2750
(14:05:40  08.10.2015 г.)

Омг какой огород не проще ли воспользоваться JQuery: $('div').animate({opacity: "hide"},5000);
Ответить

Administrator
0
# 2751
(14:16:30  08.10.2015 г.)

На JQuery конечно проще, но не все пользуются данной библиотекой. И данной теме уже более четырех лет.
Ответить

Виталий
0
# 3452
(12:57:11  26.09.2016 г.)

Здравствуйте, подскажите, пожалуйста, как с помощью .hover(function()) поменять прозрачность при наведении, например при перезагрузки страницы код:
$(function() {$("#logo").animate({opacity: .7}, 5000, function() {});});
А при наведении хотел бы opacity: 1, css понятно, хотел бы данный момент на jQuery реализовать с вашей помощью.
Ответить

Administrator
0
# 3458
(22:50:27  26.09.2016 г.)

Например, так:
$('#logo').hover(
function(){ $(this).animate({opacity: .7},2000); },
function(){ $(this).animate({opacity: 1},2000); });
});
Ответить

Закрыть
Ваше имя:
614 + 10 =
Добавить комментарий:
Ваше имя:
614 + 10 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 7

Какой браузер Вы используете?