Question

当鼠标悬停在缩放图像上时，我正在尝试进行更多缩放。我的意思是当cusror悬停在缩放图像上时，某些部分如正方形，矩形，圆形e.t.c图像的一部分应该缩放。我有以下代码。请建议我如何通过onclick缩放图像后实现更多变焦。

  <div id="overlay"></div>
  <div id="overlayContent">
 <img id="imgBig" src="" alt="" width="400" />
 </div><div class="imgSmall"><img src="xyz" 
 id="ProductPhotoImg">
         </div>
       </div>
 <script>
 $("#ProductPhotoImg").click(function(){
 $("#imgBig").attr("src",$(this).attr('src'));
 $("#overlay").show();
 $("#overlayContent").show();
  });

 $("#imgBig").click(function(){

$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC

  $("#overlay").hide(); 
  $( "#overlayContent" ).hide();
}
});
</script>
<style>
#overlay{
 position: fixed; 
 padding-right:10px;
 width: 100%; 
 height: 100%; 
 top: 0px; 
 left: 0px; 
 background-color: #000; 
 opacity: 0.7;
 filter: alpha(opacity = 70) !important;
 display: none;
 z-index: 100;

}
#overlayContent{
position: fixed;
-webkit-transform: scale(1.7); 
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
align-content:center;
width: 100%;
height: 100%;
display: none;
z-index: 100;
top: 100px;
padding-right: 24em;
padding-left: 14.3em;
top:16.2em;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall, #ProductPhotoImg{
 cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
 }
</style>

此代码用于onclick zoom.but我想进一步缩放鼠标悬停以放大图像（例如鼠标悬停在图像上时只悬停部分图像应该缩放），请整理我的问题朋友。

提前致谢：）

Answer 1

最好的方法是使用：hover伪类。你要做的就是..

// Name class
.class {
  height: 20px;
  width: 20px;
}

.class:hover {
  height: 25px;
  width: 25px;
}

您可以将这些数字更改为您喜欢的任何数字，但您还应该查看可以在css中使用的其他很酷的伪类！ :)希望这有帮助！

Answer 2

为什么不尝试使用css悬停？

像：

.myClass{
    height: 100px;
    transition: 1s;
}
.myClass:hover{
    height: 200px;
}

在点击事件中，您调用javascript函数，如：

function myFunc(object){
    object.className += "myClass";
}

Answer 3

你可以更容易地做到：

.normalpic {
width: 25px;
height: 25px;
}
.normalpic:hover {
width: 50px;
height: 50px;
}

这会使图像在悬停时变大2倍

鼠标悬停时缩放图像

3 个答案: