요소를 만들고 독립적으로 스크롤하십시오.

저는 웹 개발에 익숙하지 않습니다. (키)이 버튼 10 번 누를 때요소를 만들고 독립적으로 스크롤하십시오.

기본적으로 내가 뭘하려고

시나리오 .. 이미지가 나타납니다 다음 화면에서 스크롤 사라지게하는 버튼 (또는 키보드 키)가있다 , 1 초마다 1 초.

10 개의 이미지가 나타나고 각 이미지가 화면 너비로 스크롤 한 다음 사라집니다.

어떻게해야합니까?

내가 얻고 싶은 효과는 http://www.vogue.co.uk/ 웹 사이트에 사용 된 Konami 코드 부활절 달걀과 매우 비슷합니다.

JavaScript 또는 이와 유사한 것으로 추측하고 있지만 작성 방법을 모르겠습니다. jQuery에서 스크립팅도 알지 못합니다. 여기

출처

2014-02-11 Stealthbird97

jQuery로 가능해야합니다. http://api.jquery.com/animal/ – Chris

CSS 애니메이션과 같이 http://api.jquery.com/category/effects/를 볼 수 있습니다. – 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

지금하겠습니다. 그러나 약간 다른 점에서, 내가 호출되었을 때만 실행되도록이 기능을 얼마나 정확하게 통합 할 수 있습니까? 따라서 일단 다른 자바 스크립트에 의해 실행되면 "활성"상태가됩니다. – Stealthbird97

내가 뭔가를 내놓았다 :

는 여기에 바이올린입니다. 그게 아니라면 할 수 있지만 작동 할 수있는 깨끗한 :

을 heres 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>

그리고는 자바 스크립트 함수입니다 : 당신이 필요로하는 것입니다

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

요소를 만들고 독립적으로 스크롤하십시오.

답변

관련 문제