JQuery/Javascript 블록 스케일링

일부 div 블록이 있습니다. 나는 그것의 크기를 조절하는 데 필요하다. MacOS 도킹 패널에서와 마찬가지로, 아이콘이 맴돌 때. 내가 할 수 있을까?JQuery/Javascript 블록 스케일링

2010-04-20 Ockonal

자바 스크립트! = javascript – balexandre

그래, 놓쳤다. 감사. – Ockonal

예 수행 할 수 있습니다

HTML :

<div class="scaleMe">&nbsp</div>

jQuery를 : : 여기

$(function(){ /* makes sure your dom is ready */ 
    $('div.scaleMe').hover(function(){ 
         $(this).stop(false, true).animate({width:'50px', height:'50px'}, 1000) /* makes the div big on hover, and .stop() makes sure the annimation is not looping*/ 
        },function(){ 
         $(this).stop(false, true).animate({width:'20px', height:'20px'}, 600) /* goes back to normal state */ 
        }) 
})

당신이 jQuery를 함께 만든 독 같은 OSX의 좋은 예를 찾을 수 있습니다 http://www.ndesign-studio.com/blog/css-dock-menu

출처

2010-04-20 13:18:42 meo

이 메뉴는 다음과 같습니다. 굉장해! –

어쩌면 이렇게 될까요?

$("#myDiv").hover(
    function(){ 
     $(this).css({height : scaled_height, width : scaled_width}); 
    }, 
    function(){ 
     $(this).css({height : original_height, width : original_width}); 
    } 
);

출처

2010-04-20 13:13:24 Jon

'$ (this) .css ({height : originalHeight, width : originalWidth}); ' –

@Mathias Bynens, 팁 주셔서 감사합니다. ! 나는 그것을 지금 바꿀 것이다. – Jon

.hover()를 사용하지 않는 이유는 무엇입니까? – meo

나는이 해결책을 http://jsbin.com/ecuzof/1/edit/에서 얻었다. 승인은 작성자에게갑니다. http://forum.jquery.com/topic/i-want-to-resize-or-scale-the-div-on-hover에서 링크를 찾았습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8> 
     <title>Zoom DIV on Hover</title> 
     <link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> 
     <style> 
      body{ 
       font-size:162.5%; 
      } 
     </style> 
     <style> 
      .sectionToZoomOnHover { 
       display: table-cell; 
       text-align: center; 
       vertical-align: middle; 
       width: 200px; 
       height: 50px; 
       margin: 1em; 
       padding: 1.2em; 
       border: 1px solid gray; 
       background: yellow; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="sectionToZoomOnHover"> 
      Hover me. I'll grow 
     </div> 

     <script> 
      $(".sectionToZoomOnHover").hover(
       function() { 
        $(this).stop().animate(
         { 
          width: 360, 
          height: 100, 
          backgroundColor: "lightBlue", 
          fontSize: "3em" 
         } 
        ); 
       }, function() { 
        $(this).stop().animate(
         { 
          width: 200, 
          height: 50, 
          backgroundColor: "yellow", 
          fontSize: "1em" 
         } 
        ); 
       } 
      ); 
     </script> 
    </body> 
</html>

불행하게도, 나는 확대하는 방법을 생각하지 않은 그래서 DIV의 중심점은 정말 너무하고 싶은 효과가있는 그대로 남아있다.

출처

2012-08-22 01:41:07

JQuery/Javascript 블록 스케일링

답변

관련 문제