Question

我需要一个帮助。当鼠标悬停在特定图像上时，我需要使图像变大/变焦。我正在解释下面的代码。

<div ng-repeat="mul in mulImage">
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>

        <input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">


        <span class="input-group-btn" ng-show="mulImage.length>0">
            <img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"><img ng-src="upload/{{mul.filename}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''">
                    <input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">

        </span>
      </div>
      </div>

这里我通过使用+按钮创建新文件字段来选择多个图像。我的控制器端代码如下所示。

$scope.mulImage=[];
   $scope.mulImage.push({'image':null,'filename':''});
   console.log('mulimage',$scope.mulImage);
   $scope.addNewImageRow=function(mulImage){
       console.log('total image',mulImage.length);
       mulImage.push({'image':null,'filename':''});
       console.log('end total image',mulImage.length);

   }
   $scope.deleteNewImageRow=function(mulImage,index){
       mulImage.splice(index,1);
       console.log('file',$scope.mulImage);
   }
   $scope.onFileSelect1 = function(index) {
         $scope.mulImage[index]['filename']='';

   }

这里我需要从驱动器中选择图像，而用户将鼠标悬停在该图像上时图像将变大，用户将再次鼠标移出图像将出现在其原始位置。这是我的plunkr working code。请帮我解决这个问题。

Answer 1

您可以使用 CSS 来使用 transform：scale（1.1）执行悬停效果：

.input-group-btn:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Answer 2

试试这段代码 -

.image { 
width:250px; 
height:250px;
margin-right:10px;
float:left; 
overflow:hidden; 
cursor:pointer; 
}

.image > img { 
-webkit-transition:all 500ms linear; 
-moz-transition:all 500ms linear; 
-o-transition:all 500ms linear; 
-ms-transition:all 500ms linear; 
transition:all 500ms linear; 
}

.image > img:hover { 
-moz-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
transform: scale(1.5); 
}

请参阅此链接 - http://fiddle.jshell.net/Talsja/f6awjwty/

如何在使用Angular.js鼠标时使图像变大

2 个答案: