JQuery/JavaScript塊縮放

我有一些div塊。我需要擴大它自己的規模。像在MacOS Dock面板中一樣，當圖標被徘徊時。我可以這樣做嗎？JQuery/JavaScript塊縮放

2010-04-20 Ockonal

java script！= javascript – balexandre 2010-04-20 13:20:45

是的，錯過了。謝謝。 – Ockonal 2010-04-20 13:39:08

是的，你可以：

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 */ 
        }) 
})

在這裏你可以找到一個OSX像碼頭使用jQuery做了一個很好的例子： http://www.ndesign-studio.com/blog/css-dock-menu

來源

2010-04-20 13:18:42 meo

這個菜單是真棒！ – 2012-08-22 01:24:04

也許是這樣的？

$("#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

通過將'.css（）'語句分組在一起，你可以擺脫一半：'$（this）.css（{height：originalHeight，width：originalWidth}）;' – 2010-04-20 13:15:47

@Mathias Bynens，謝謝你的提示！我現在就改變它。 – Jon 2010-04-20 13:16:54

爲什麼不使用.hover（）？ – meo 2010-04-20 13:23:06

我從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塊縮放

回答

相關問題