javascript 변수를 사용하여 transform 속성 값을 설정하는 방법

나는 이와 비슷한 대답을 찾았지만 저에게는 적합하지 않습니다. jquery animate 대신 css3 애니메이션을 사용하여 단일 페이지 레이아웃을 스크롤하려고합니다. 내가 뭘 촬영 해시 변수의 위치를 해시 위치로 설정하고 transformX()로 전달합니다. 여기 내가 지금까지 가지고있는 것이있다.javascript 변수를 사용하여 transform 속성 값을 설정하는 방법

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
</head> 
<body> 
<section id="wrapper"> 
    <div class="nav-wrapper"> 
     <nav> 
      <ul> 
       <li class="nav-li"><a href="#intro">home</a></li> 
       <li class="nav-li"><a href="#work">work</a></li> 
       <li class="nav-li"><a href="#about">about</a></li> 
       <li class="nav-li"><a href="#contact">contact</a></li> 
      </ul> 
     </nav> 
    </div> 
    <div class="home"> 
     <div id="intro" class="content"> 
     </div> 
    </div> 

    <div class="portfolio"> 
     <div id="work" class="content"> 
     </div> 
    </div> 

    <div id="about" class="about"> 
    </div> 

    <div id='contact' class="connect"> 

    </div> 
    <footer> 

    </footer> 
</section> 


<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/main.js"></script> 
</body></html>

관련 CSS :

html,body { 
    height:100%; 
    text-align:center; 
    transition:all 1s ease-in-out; 
    -webkit-transition:all 1s ease-in-out; 
    -moz-transition:all 1s ease-in-out; 
    -o-transition:all 1s ease-in-out; 

}

및 관련 자바 스크립트 :

$(".nav-li > a").click(function(event){ 
     event.preventDefault(); 
     //calculate destination place 
     var dest; 
     if($(this.hash).offset().top > $(document).height()-$(window).height()){ 
       dest=$(document).height()-$(window).height(); 
     }else{ 
       dest=$(this.hash).offset().top; 
     } 

     //go to destination 
     $('body').css('transform', 'translateY('+ dest +')'); 
         //('-webkit-transform', 'translateY('+ dest +')'); 
         //('-ms-transform', 'translateY('+ dest +')'); 
         //('-moz-transform', 'translateY('+ dest +')'); 
         //('-o-transform', 'translateY('+ dest +')'); 
     console.log(dest) 
    });

나는 확실히 당신을 console.log (이명 령)으로 볼 수있는 '이명 령'에 대한 올바른 값을 얻고있다 . 이것은 가능하지 않습니까?

출처

2013-09-05 user1873632

또한 개체를 css 메서드에 전달할 수 있으므로 모든 단일 브라우저 접두사에 대해 새 함수를 만들지 않아도됩니다. – codewizard

Fiddle Example

당신은 번역 단위를 지정해야합니다

$('body').css('transform', 'translateY(-' + dest + 'px)');

에

$('body').css('transform', 'translateY(' + dest + ')');

에서 코드를 변경

. -ve 표시는 몸을 아래쪽이 아닌 위쪽으로 움직이는 것입니다. 이것은 당신이 기대하는 것입니다.

출처

2013-09-05 00:26:31 DGS

나는 같은 문제가 있으며 불행히도 도움을받지 못했다고 대답합니다. 아이디어가 있으십니까? – Mosijava

javascript 변수를 사용하여 transform 속성 값을 설정하는 방법

답변

관련 문제