VPF::Opacity. Плавное угасание. - Форум программистов

Bangladesh

Дата 7.8.2005, 05:09 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: -1
Всего: 17

необходимо, чтобы картинка плавно затухала и плавно загоралась при наведении. для этого делаем прозрачность. почему то при такой реализации, как у меня получается ошибка в строке 1 с символом 1. я не пойму, что здесь неправильно... собственно, как добиться результата?

Код


<HTML><HEAD><TITLE>Логотип во всей его красе</TITLE>
<META HTTP-EQUIV=CONTENT-TYPE CONTENT="TEXT\CSS CHARSET=WINDOWS-1251">
<STYLE>
BODY {
BACKGROUND-COLOR: BLACK;
}
#logo {FILTER: ALPHA(OPACITY=35, STYLE=0)}
</STYLE>
<script LANGUAGE="JavaScript">


function PlusPlus()
{

Op = document.all.logo.filters["alpha"].opacity;

  function Change()
  {
   Op += 1;
  }

 if(Op != 100){
 {
 setInterval("Change()",500)
 }

}


function MinMin()
{
 Op = document.all.logo.filters["alpha"].opacity;

  function Change()
  {
   Op -= 1;
  }

 if(Op > 35){
 {
 setInterval("Change()",500)
 }


}

</SCRIPT>
</HEAD>
<BODY LEFTMARGIN=0 RIGHTMARGIN=0 TOPMARGIN=0 BORDER=0>
<IMG SRC="GYOZ.GIF" WIDTH=100 HEIGHT=40 BORDER=0 ID="logo" OnMouseOver="PlusPlus();" OnMouseOut="MinMin();">
</BODY>
</HTML>

М	Пользуйтесь подсветкой корректно.

Это сообщение отредактировал(а) Aliance - 15.8.2005, 19:29

--------------------

ок

Sardar

Дата 7.8.2005, 17:07 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Вот написал решение под многие браузеры, на сколько знаю:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Переливы прозрачности. Плавные изменения свойств.</title>
<style type="text/css">
#test {
  background-color: red;
  float:left;
  border: 1px solid navy;
  padding: 10px;
  _filter: alpha(opacity=10); /* IE */
  -moz-opacity: 0.1; /* mozilla */
  -khtml-opacity: 0.1; /* KHTML Engine(Konquerror) */
  opacity: 0.1; /* За*бали различия браузров? Используй CSS3! */
}
</style>
<script type="text/javascript">
<!--
function showElement(show, obj, time, resolution) {
  resolution=(resolution>0? resolution: 50); //пауза между фреймами, не ставь мало, у тебя не такая крутая машина ;-)
  var step=(show? 1: -1)*(1/(time>0? time: 1000))*resolution; //шаг в процентах от заданного времени
  
  var opacity=(typeof(obj.style.KhtmlOpacity)!="undefined")? parseFloat(obj.style.KhtmlOpacity): //konquerror и его семейство
              (typeof(obj.style.MozOpacity)!="undefined")? parseFloat(obj.style.MozOpacity): //мозилла и прочие Gecko. кстати, долбанная мозилла не покажет какое сейчас значение, если его не меняли...
              (typeof(obj.filters)!="undefined")? obj.filters.Alpha.opacity/100: //ИЕ вариант
              (typeof(obj.style.opacity)!="undefined")? parseFloat(obj.style.opacity): //не стоит доверять, может не undefined для понту, а всё равно не поддерживаеться CSS3
              null; //нет прозрачности как таковой
              
  if(opacity==null) return;
  opacity=isNaN(opacity)? (show? 0: 1) : opacity; //тест на вшивость
  //и так здесь мозилла(возможно konquerror) обложалась, мы не можем узнать значение opacity если оно не менялось
  //потому в первый раз возьмём как будто мы находимся на границе, либо 0, либо 1
  
  var timer=window.setInterval(function() {
     if((opacity+=step)>=1||opacity<=0) window.clearInterval(timer);
     if(obj.filters) obj.filters.Alpha.opacity=Math.round(opacity*100);
     obj.style.KhtmlOpacity=obj.style.MozOpacity=obj.style.opacity=opacity;
  }, resolution);
}
//-->
</script>
</head>

<body>
<div id="test" onclick="showElement(true, this)">Click to show!</div>
<button onclick="showElement(false, document.getElementById('test'));">Hidde</button>

</body>
</html>

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Wowa

Дата 27.3.2006, 22:58 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Уже прошел почти год. Может быть у кого-нибудуль появилось полностью кроссбраузерное решение(в ИЕ что-то даже не отображается)?
Добавлено @ 23:02
Sardar, где в твоем решении можно задать УРЛы картинок?
Добавлено @ 23:07
Вот еще вариант, но плавная смена картинок только в ИЕ работает.

Код


===========================================================
Script:   JavaScript Cross-Browser SlideShow Script
          With Cross-Fade Effect between Images
          Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
          presentation format, with a fade effect on
          image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
          Fade effect only in IE; others degrade gracefully
Author:   etLux
===========================================================

Step 1.
Put the following script in the head of your page:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

===========================================================

Step 2.
Put this onload event call in your body tag:
  
<body onload="runSlideShow()">  

===========================================================

Step 3.
Put this in the body of your page where you want the 
slide show to appear.  

Set widths and heights same as images
Set image file same as first image in array Pic[] (above)

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>

===========================================================

S.A.P.

Дата 27.3.2006, 23:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Wowa, вот здесь http://forum.vingrad.ru/index.php?showtopic=80325 последний пост - мой. Только совсем древние браузеры конечно отдыхают.

Aliance

Дата 27.3.2006, 23:20 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Wowa, какие Url? Я там вообще картинок не вижу smile

Кстати, немного не то, но может пригодится?

Код


<HEAD>
<script>
var startImage ="fruit.gif";
var endImage="mouse.gif";
function doTrans() {
//        imgObj.filters[0].orientation='horizontal';
        imgObj.filters[0].apply();
        if (oImg.src.indexOf(startImage)!=-1) {
            oImg.src = endImage;
            imgObj.style.backgroundColor = "gold";
            imgObjText.innerHTML =             "<BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content."        }
        else {
            oImg.src = startImage;
            imgObj.style.backgroundColor = "skyblue";
            imgObjText.innerHTML =             "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes."        }
        imgObj.filters[0].play();
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward); FONT: 9pt/1.3 verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR: gold"><IMG id=oImg style="MARGIN: 8px" src="mouse.gif" align=left>
<DIV id=imgObjText><BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content.</DIV></SPAN><BR><BR>
<BUTTON onclick="doTrans()">Play Transition</BUTTON>
</BODY>

Брал, по-моему, с msdn`а

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

12345c

Дата 28.3.2006, 00:42 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Прозрачность в 9-й Опере не обещают.

Wowa

Дата 28.3.2006, 00:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(12345c @ 27.3.2006, 22:42

)

Прозрачность в 9-й Опере не обещают.

фигово..

S.A.P.

Дата 28.3.2006, 09:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Цитата(12345c @ 28.3.2006, 00:42

)

Прозрачность в 9-й Опере не обещают.

у меня работает причем стандартный Opacity, см. последнюю ссылку.

12345c

Дата 28.3.2006, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Странно, а в форумах пишут, что нет в анонсах, и в самом анонсе не видел - хотя ещё раз проискав, увидел такое от разработчиков: http://my.opera.com/olli/blog/show.dml/81711 (9. December 2005) -

Цитата

On the core side we have fixed many crashes and we have also added support for opacity.

Значит, впоследствии в каком-то билде добавили. Это хорошо, весьма востребовано, наряду с другими технологиями. (Тут же переводы источника: http://my.opera.com/ELV1S/blog/show.dml/49088 , http://my.opera.com/Dennis_Hawks/blog/show.dml/81743 )

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

DenVdmj

Дата 1.7.2008, 18:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 11.6.2007

Репутация: нет
Всего: нет

Ничего, что тему подниму?
Понадобилась кроссбраузерная работа с прозрачностью, очень эта тема помогла, спасибо Sardarу. Даю функу на растерзание, хочется тестов в разных браузерах. Сам тестил только на опера 9+, мсие 6, фф 2.

Код

(function (){

    var e = document.createElement('i'), // html-элемент для проверки имени opacity-свойства
        s = e.style, // шоткат
        OK; // OK -- Opacity Key (-;

    for(OK in {opacity:0,MozOpacity:0,KhtmlOpacity:0,'':0}) if( s[OK] != null ) break; // найти поддерживаемое свойство

    e = null; // удалить более не нужный html-element

    window.getOpacity = OK ?
        function (e){ return e.style[OK] - 0 } : // для браузеров с css opacity
        function (e){ return (e = e.filters.Alpha) ? e.opacity * .01 : 0 }; // для msie

    window.setOpacity = OK ?
        function (e, value){ e.style[OK] = value } : // для браузеров с css opacity
        function (e, value){ e.style.filter="alpha(opacity="+Math.round(value * 100)+")" }; // для msie. обращаться к filters.Alpha.opacity нельзя, если в таблице стилей нет правила с проспианным фильтром подходящего для этого элемента. поэтому клеим строчкой.
})();

Это сообщение отредактировал(а) DenVdmj - 1.7.2008, 21:07

DenVdmj

Дата 1.7.2008, 20:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 11.6.2007

Репутация: нет
Всего: нет

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

Код


(function (){

    var e = document.createElement('i'), // html-элемент для проверки имени opacity-свойства
        OK, // OK -- Opacity Key (-;
        k = [0,'KhtmlOpacity','MozOpacity','opacity']; // варианты имен opacity-свойства

    while(e.style[OK = k.pop()] == null && OK); // найти поддерживаемое имя opacity-свойства

    e = null; // удалить более не нужный html-element

    window.getOpacity = OK ?
        function (e){ return e.style[OK] - 0 } : // для браузеров с css opacity
        function (e){ return (e = e.filters.Alpha) ? e.opacity * .01 : 0 }; // для msie

    window.setOpacity = OK ?
        function (e, value){ e.style[OK] = value } : // для браузеров с css opacity
        function (e, value){ e.style.filter="alpha(opacity="+Math.round(value * 100)+")" }; // // для msie. обращаться к filters.Alpha.opacity нельзя, если в таблице стилей нет правила с фильтром подходящего для этого элемента. поэтому клеим строчкой.
})();

Это сообщение отредактировал(а) DenVdmj - 1.7.2008, 20:23

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »