Блог

Главная - Вопросы по программированию - Как добавить эффекты затухания в JavaScript

Как добавить эффекты затухания в JavaScript

#javascript #image #fading

#javascript #изображение #затухание

Вопрос:

У меня есть JS-код, и я хотел бы знать, как добавить эффект затухания. В коде у меня есть 3 изображения.

Вот код:

 <html>
    <head>
        <script type="text/javascript">
            var image1 = "pic001.png"
            var image2 = "pic002.png"
            var image3 = "pic006.png"
        </script>
    </head>


    <!--<body onLoad="slidit()">-->
        <body>
        <form name="images">
            <!--<img src="pic001.png" name="slide" width="200" height="200" /> -->
            <img src="pic001.png" name="slide"  />

            <script>

                //variable that will increment through the images
                <!--var step = 1
                function slideit(){
                    //if browser does not support the image object, exit.
                    switch(step){
                        case 1:
                            document.images.slide.src = image1;
                            break;
                        case 2:
                            document.images.slide.src = image2;
                            break;
                        case 3:
                            document.images.slide.src = image3;
                            break;
                    }
                    if (step < 3) {
                        step  
                    }
                    else {
                        step = 1
                    }
                    //call function "slideit()" every 3.5 seconds
                    setTimeout("slideit()", 3500)
                }

                slideit()


            </script>


        </form>
    </body>
</html>

Это код эффекта затухания, как я могу вставить это в свой демонстрационный код?

 function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO   (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('"   id   "',"   msDuration   ","   msStart   ","   fromO   ","   toO   ")",1);
  }
}
function FadeIn(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('"   id   "',1000,"   startMS   ",0,100)",1);
}
function FadeOut(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('"   id   "',1000,"   startMS   ",100,0)",1);
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      background.style.backgroundImage = 'url('   foreground.src   ')';
      background.style.backgroundRepeat = 'no-repeat';
    }
  }
  SetOpacity(foreground,0);
  foreground.src = newImage;
  if (foreground.timer) window.clearTimeout(foreground.timer); 
  var startMS = (new Date()).getTime();
  foreground.timer = window.setTimeout("ChangeOpacity('"   foregroundID   "',1000,"   startMS   ",0,100)",10);
}

Комментарии:

1. Вам нужно сделать это самому? Потому что это могло бы сэкономить вам много времени, если бы вы просто использовали какой-нибудь фреймворк, такой как jQuery: api.jquery.com/fadeIn

2. @Гарри Грин: Когда я вставил второй скрипт в свой код, он не сработал. Код также был показан на сайте.

3. 1) Я не понимаю вопроса. Что вы имеете в виду под «куда вставить это в коде»? 2) Передача строки в setTimeout приводит к eval этому; вы можете передать параметры функции 1 .

4. @tintincute: поместите скрипт между <script> тегами.

5. @Kevin: Я слышал, что Jquery великолепен. Но у меня нет никакого опыта в этом. Спасибо за сайт, он выглядит полезным. Я прочитаю информацию тогда

Ответ №1:

Почему вы не используете jQuery fadein / out ..?

Комментарии:

1. Может быть, он не хочет использовать библиотеку, но сделает это сам? СДЕЛАЙ САМ — отличный способ научиться чему-то.

2. потому что я хотел бы сделать это лично и интегрировать на веб-сайте.

Ответ №2:

Вам не нужно использовать эту функцию, просто чистый CSS и Javascript

И не забудьте добавить style=’переход: все 0,6секунды;’

 function slideit(){

       if (!document.images)
          return


        document.getElementById('slide').style.opacity = "0";
        setTimeout(function(){
            document.getElementById('slide').src = slideimages[step].src;
            document.getElementById('slide').style.opacity = "1";
        },500)

            if (step<3)
             step  
             else
             step=1

             setTimeout(slideit,3500)



     }