jquery image resize transition onMouseOver

只是想知道是否有任何jQuery插件，当你的鼠标放在图像上时，这个图像的大小会增加，如果你的鼠标不在图像中，它会减小所有这些平稳过渡。谢谢！jquery image resize transition onMouseOver

2010-08-15 Gmo

试试这个http://justinfarmer.com/?p=14，这里是一个演示http://justinfarmer.com/tutorials/imageexpansion/imageexpansion.html。我认为这正是你需要的。 – starikovs 2010-12-21 13:37:29

你可以试试Zoomer gallery plugin，或者根据this tutorial推出自己的产品。就个人而言，我会去教程路线，因为它会给你更多的控制结果（你会学到一些东西引导;）

来源

2010-08-15 23:10:40 Pat

如果你只是想要一个图像，你可以使用jQuery的UI效果。注意这与基本jQuery是分开的 - 在jQuery的调用之下添加它。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

现在你已经添加了一个链接到用户界面，我们可以使用它的效果库，像这样：

脚本：

$(document).ready(function() { 
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)}) 
});

HTML：

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

刚请记住，当您扩大规模时，您需要弄清楚如何缩小规模，因为新规模将达到100％。在我的代码中，我们将其加倍（200％），然后将其减少一半（50％）以恢复原始代码。随意玩转换时间，以及任何可能需要的回调以使其完美无缺。

链接到jQuery .hover()和jQuery UI effects

来源

2010-08-15 23:25:00 WSkid

有是一个jQuery破解：

$(document).ready(function() { 
    $('#target_selector').mouseover(function(){ 
     $(this).css('height':'value', 'width':'value') 
     $(this).mouseout(function(){ 
      $('this').css('height':'value', 'width':'value') 
     }); 
    }); 
});

但是你可以使用一个CSS伪类，：悬停

#target_selector { 
    height: value; 
    width: value; 
} 
#target_selector:hover { 
    height: value; 
    width: value; 
}

要么可能是应用于此示例HTML

<html> 

<body> 

    <img id="target_selector" /> 

</body> 

</html>

来源

2012-04-27 09:03:17 rojobuffalo

jquery image resize transition onMouseOver

回答

相关问题