Случайное затухание и затухание

Мне нужно, чтобы каждый из блесток внизу исчезал и исчезал случайно, не все одновременно. 1-2 за один раз. Кроме того, я не хочу, чтобы изображение «Pack» исчезло. Я не хочу, чтобы блестки затухали в/из-за функции, например, при наведении. Мне также нужно, чтобы все они исчезли через 5 секунд. Пожалуйста, помогите, я пробовал все, не могу понять. Я новичок в веб-разработке и javascript.Случайное затухание и затухание

Вот скрипка, которую я нашел, я хотел бы, чтобы это было похоже на это, я пробовал редактировать код. Я сейчас очень смущен.

http: // jsfiddle (dot) net/maniator/rcts4/- Fiddle (я не смог загрузить более двух ссылок, пожалуйста, выньте пробел после http: // и замените «(dot)» на . для просмотра скрипку

http://pastebin.com/DkDjU0qS -. HTML http://pastebin.com/Zr1vjafn - CSS

источник

2014-01-04 Journey

, пожалуйста, создайте страницу http://plnkr.co/ (или http://jsfiddle.net/) с кодом – akonsu

Хорошо, я добавил его в plnkr.co - http://plnkr.co/ edit/pGc2YcI06ES0eCjTB575? p = preview – Journey

, но нет JS-кода ... – akonsu

HTML

<html> 
    <head> 
     <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
     <!-- Pack --> 
     <img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png"> 

     <!-- Sparkles--> 
    <div id="sparkles"> 

     <img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 

     <img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png"> 
     </div> 
     <script> 

     // Define a random integer function 
     function random(n) { 
      return Math.floor(Math.random() * n); 
     } 

     // Define some variables, hide all images and show just one of them. 
     var transition_time = 500; 
     var waiting_time = 500; 
     var images = $('div#sparkles img'); 
     var n = images.length; 
     var current = random(n); 

     images.hide(); 
     images.eq(current).show(); 

     // Periodically, we fadeOut the current image and fadeIn a random one 
     var interval_id = setInterval(function() { 
      images.eq(current).fadeOut(transition_time, function() { 
       current = random(n); 
       images.eq(current).fadeIn(transition_time); 
      }); 
     }, 2 * transition_time + waiting_time); 

     </script> 
    </body> 
</html>

CSS

html, body { 
     width: 100%; 
     height: 100%; 

     background-color: white; 
    } 

    #pack { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     height: 300px; 
     width: 200px; 
     margin-top: -100px; 
     margin-left: -100px; 
    } 

    #sparkle1 { 
     position: absolute; 
     top: -8%; 
     left: 50%; 
     height: 140px; 
     width: 150px; 
    } 

    #sparkle2 { 
     position: absolute; 
     top: 90%; 
     left: 57%; 
     height: 180px; 
     width: 155px; 
    } 

    #sparkle3 { 
     position: absolute; 
     top: 94%; 
     left: 29%; 
     height: 140px; 
     width: 115px; 
    } 

    #sparkle4 { 
     position: absolute; 
     top: 25%; 
     left: 86%; 
     height: 150px; 
     width: 123px; 
    } 

    #sparkle5 { 
     position: absolute; 
     top: 20%; 
     right: 83%; 
     height: 145px; 
     width: 118px; 
    } 

    #sparkle6 { 
     position: absolute; 
     top: 79%; 
     right: 82%; 
     height: 150px; 
     width: 120px; 
    } 

    #sparkle7 { 
     position: absolute; 
     top: 52%; 
     right: 85%; 
     height: 150px; 
     width: 130px; 
    } 

    #sparkle8 { 
     position: absolute; 
     top: 50%; 
     left: 85%; 
     height: 180px; 
     width: 160px; 
    } 

    #sparkles { 
     position: absolute; 
     top: 50%; 
     left: 50%; 

     width: 500px; 
     height: 500px; 
     margin-top: -250px; 
     margin-left: -250px; 
    }

Вот обновленный JSFiddle

Надеется, что это помогает.

источник

2014-01-04 01:48:25 felipekm

Это определенно помогло, но я не слишком хорошо знаком с Javascript ..:/Я не уверен, как работают время перехода и т. д. Я пробовал обманывать этот код и на Plunker, но я не смог заставить его функционировать. – Journey

Это миллисекунды, я обновлю JSFiddle с кодом. – felipekm

Благодарим вас за это, он отлично работает! :) Есть ли способ остановить тот же блеск повторения? Я заметил, что это происходит много. – Journey

Случайное затухание и затухание

ответ

Смежные вопросы