Создавайте элементы и самостоятельно прокручивайте их

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

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

Сценарий: Кнопка (клавиша) нажат в 10 раз , 1 раз в секунду.

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

Как я могу это сделать?

Эффект, который я хотел бы получить, очень похож на пасхальное яйцо Konami, используемое на сайте http://www.vogue.co.uk/.

Я предполагаю, что это JavaScript или аналогичный, но я не знаю, как его написать. Я также не знаю скриптов в jQuery.

источник

2014-02-11 Stealthbird97

Это должно быть возможно с помощью jQuery, вы можете посмотреть http://api.jquery.com/category/effects/, например http://api.jquery.com/animate/ – Chris

CSS-анимации. – bjb568

Здесь вы идете:

$(function() { 
    var images = [ 
     'http://placehold.it/100x100', 
     'http://placehold.it/150x150', 
     'http://placehold.it/200x250', 
     'http://placehold.it/200x200']; 
    var index = 0; 
    $(document).on('keypress', function (event) { 
     var c = String.fromCharCode(event.charCode); 
     if(c === 'a') { 
      var image = images[index]; 
      console.log(image); 
      index = (index + 1) % images.length; 
      $('<img style="position: fixed; bottom: 0; right: 0" src="' + image + '"/>') 
       .appendTo(document.body) 
       .animate({right: '200%'}, 2000, function() { 
        $(this).remove(); 
       }); 
     } 
    }) 
});

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

Вот Fiddle: http://jsfiddle.net/acbabis/tD4FG/

источник

2014-02-11 18:19:16 acbabis

Чем вы так сильно. Именно то, что мне нужно. Хорошая работа! – Stealthbird97

@ Stealthbird97 Добро пожаловать. Обязательно принимайте ответ. – acbabis

Я сделаю это сейчас. В несколько разной точке зрения, как именно я мог бы интегрировать это, чтобы работать только тогда, когда он был вызван. Поэтому он становится «активным» как таковой, когда он запускается другим javascript. – Stealthbird97

я придумал что-то. Не чистейшее это может быть, но работает:

Херес HTML:

<!DOCTYPE html> 
<html> 
     <head>   
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
      <script src="popUpButton.js"></script> 
     </head> 

     <body> 
       <div id="ToolBar" class="ToolbarDiv"> 
       <button onclick="popUpButton()" type="button">ButtonOne</button> 
       </div>        
     </body> 
</html>

А вот Javascript функция:

function popUpButton() { 
     var popUpB = document.createElement('div'); 
     popUpB.className = 'ButtonClass'; 
     popUpB.id = 'ButtonID'; 
     var message = document.createElement('img'); 
     message.src = "http://www.google.com/intl/en_com/images/logo_plain.png"; 
     popUpB.appendChild(message);           
     document.body.appendChild(popUpB); 

     $("img").animate({ 
      marginLeft: "+=1000px", 
     }, 3000); 
}

Надеется, что это то, что вам нужно.

источник

2014-02-11 19:33:29 Kostadin

Создавайте элементы и самостоятельно прокручивайте их

ответ

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