创建元素并独立滚动它们

我对这种Web开发并不是很熟悉。创建元素并独立滚动它们

基本上什么，我试图做的是有一个按钮（或键盘键）使影像出现，然后在屏幕上滚动消失..

场景：按钮（按键）时的10倍，每秒1次。

出现10幅图像，每幅图像在屏幕宽度上滚动然后消失。

我该如何做到这一点？

我想要得到的效果与http://www.vogue.co.uk/网站上使用的Konami码复活节彩蛋非常相似。

我猜这是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(); 
       }); 
     } 
    }) 
});

按“A”键，使图像从右侧的阵列幻灯片。编辑阵列以使用您的图像。你需要在你的项目中包含jQuery。

这里有一个小提琴：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

创建元素并独立滚动它们

回答

相关问题