Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.93/14: Рейтинг темы: голосов - 14, средняя оценка - 4.93
1 / 1 / 0
Регистрация: 27.02.2010
Сообщений: 190
1

При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно)

19.12.2010, 11:56. Показов 2823. Ответов 6
Метки нет (Все метки)

При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно), при отведении прозрачность убиралась. Что то вроде такого:
http://www.tigir.com/opacity.htm
Но хотелось бы без подключения всяких библиотек. Просто сразу в коде, если такое возможно.
Спасибо.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.12.2010, 11:56
Ответы с готовыми решениями:

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

Изображение не увеличивается при наведении
У меня три картинки расположены горизонтально они все каждая в своем диве, так вот почему когда...

Кнопка, плавно меняющая цвет при наведении
не могу разобраться как добавить цвета. их должно быть 16, а у меня получился только 1 <html>...

Плавно увеличить PictureBox при наведении курсора
Приветствую. Есть массив PictureBox, размер которых необходимо плавно изменять при наведении...

6
103 / 103 / 48
Регистрация: 09.09.2010
Сообщений: 241
20.12.2010, 02:19 2
без подключения всяких библиотек. Просто сразу в коде
Возможно!
0
Вложения
Тип файла: rar opasity.rar (16.2 Кб, 107 просмотров)
Эксперт JavaЭксперт С++
8365 / 3586 / 419
Регистрация: 03.07.2009
Сообщений: 10,708
20.12.2010, 03:03 3
Вот мой вариант
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body> 
  <img src="testimage.png" alt="test image" id="image1" style="filter:alpha(opacity=50)" 
       onmouseover="javascript: 
                    document.getElementById('imageid').value = 'image1'; 
                    timer = setInterval(over, 50)" 
       onmouseout="out()">
  <img src="testimage.png" alt="test image" id="image2" style="filter:alpha(opacity=50)" 
       onmouseover="javascript: 
                    document.getElementById('imageid').value = 'image2'; 
                    timer = setInterval(over, 50)" 
       onmouseout="out()">
  <img src="testimage.png" alt="test image" id="image3" style="filter:alpha(opacity=50)" 
       onmouseover="javascript: 
                    document.getElementById('imageid').value = 'image3'; 
                    timer = setInterval(over, 50)"  
       onmouseout="out('image3')">
  <img src="testimage.png" alt="test image" id="image4" style="filter:alpha(opacity=50)" 
       onmouseover="javascript: 
                    document.getElementById('imageid').value = 'image4'; 
                    timer = setInterval(over, 50)" 
       onmouseout="out('image4')">
  <input id="opacity" type="Text" style="display:none" value="50"/>
  <input id="imageid" type="Text" style="display:none"/>
</body>
 
<script>
  function over(){
    var filter = "alpha(opacity=" + document.getElementById('opacity').value + ")";
    document.getElementById(document.getElementById('imageid').value).style.filter = filter;
    var opacity =  parseInt(document.getElementById('opacity').value);
    opacity += 5;
    document.getElementById('opacity').value = opacity;
    if(document.getElementById('opacity').value > 100)
      clearInterval(timer);
  }
 
  function out(){
    document.getElementById(document.getElementById('imageid').value).style.filter = 'alpha(opacity=50)'; 
    document.getElementById('opacity').value = '50';
  }
</script>
ЗЫ. В повседневной жизни очень редко использую JS поэтому решение не очень красивое
0
1 / 1 / 0
Регистрация: 27.02.2010
Сообщений: 190
20.12.2010, 11:59  [ТС] 4
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
   <script language="JavaScript">
    var l = 1.0;
    var i = 0.4;
    function fade_out(id)
    {
     if(l > 0.4)
     {
      d = "fade_out('"+ id +"')";
      l-=0.03;
      setTimeout(d, 10);
      document.getElementById(id).style.opacity = l;
     }
     else
      i = l;
    }
    function fade_in(id)
    {
     if(i <= 1)
     {
      d="fade_in('"+ id +"')";
      i+=0.03;
      setTimeout(d, 10);
      document.getElementById(id).style.opacity = i;
     }
     else
      l = i;
    }
   </script>
<img src="1.jpg" alt="" id="image" onmouseover="fade_in('image')" onmouseout="fade_out('image')" />
<img src="1.jpg" alt="" id="image1" onmouseover="fade_in('image1')" onmouseout="fade_out('image1')" />

Скрипт немного подглючивает, если наводить несколько раз и быстро...Никто не знает как исправить???
0
Шаровик затейник
693 / 442 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
20.12.2010, 14:46 5
Цитата Сообщение от bosscs Посмотреть сообщение
d="fade_in('"+ id +"')";
оригинально однако))))))))))))) а не легче ли сделать так:
Javascript
1
setTimeout(fade_in(id), 10);
0
1 / 1 / 0
Регистрация: 27.02.2010
Сообщений: 190
20.12.2010, 18:47  [ТС] 6
Скрипт все равно лагает если часто наводить...И в ие не пашет( В чем проблема кто то знает?
0
Эксперт JavaЭксперт С++
8365 / 3586 / 419
Регистрация: 03.07.2009
Сообщений: 10,708
20.12.2010, 20:30 7
Да, кстати, у меня в коде опечатка. Вот фикс
Javascript
1
2
3
4
5
function out(){
  document.getElementById(document.getElementById('imageid').value).style.filter = 'alpha(opacity=50)'; 
  document.getElementById('opacity').value = '50';
  clearInterval(timer);    
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.12.2010, 20:30

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

При наведении блок увеличивается в высоте
Всем привет) Есть три блока, расположенные в одну линию, при наведении на каждый из них...

При наведении курсора на один блок, плавно выпадает другой
Грубо говоря я немного запутался с jQuery. Начал изучать не так давно. Прошу вас помочь мне...

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

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.