我们可以使用JQUERY库在弹出窗口中缩放/缩放图像

时间:2014-04-11 08:21:27

标签: javascript jquery jquery-ui image-zoom

我有动态生成的图像,需要在鼠标悬停时缩小/放大。

我尝试了以下方式,

 .thumbnail_img img:hover
 {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

}

但它只是缩放图像,图像变得模糊。

也尝试了以下方式,

    $('#' + '<%=dntbuddata.ClientID%>').hover(function () {
        $(this).css({ width: "430px", height: "434px" });
    }, function () {
        $(this).css({ width: "130", height: "134%" });
    });
}

以上方式也可以缩放图像甚至UI分布。

如果图像ZOOM OUT inpopup对话框并且不模糊,那将会很棒。

由于所有图像都是动态生成的,因此我无法创建两个副本,并在鼠标悬停时切换它们。

更新

现在,我能够解决以下称为建议的图像模糊问题。现在,如何将此图像打开到弹出对话框(禁用/黑色背景)?

   if ($('#' + '<%=dntbudget.ClientID%>')) {
    $('#' + '<%=dntbudget.ClientID%>').css({ width: "130px", height: "134px", 'max-height': "530px",'max-width': "534px"});

   $('#' + '<%=dntbudget.ClientID%>').hover(function () {
       //$(this).css({ width: "430px", height: "434px" });
       $(this).animate({ width: "530px", height: "534px" }, 'slow');


   }, function () {
       // $(this).css({ width: "130px", height: "134px" });
       $(this).animate({ width: "130px", height: "134px" }, 'slow');
   });

由于 Dhaval soni

0 个答案:

没有答案