마우스를 올리면서 Angular.js를 사용하여 이미지를 확대하는 방법

도움이 필요합니다. 특정 이미지에 마우스를 올려 놓은 상태에서 이미지를 확대/확대해야합니다. 아래 코드를 설명하고 있습니다. 여기마우스를 올리면서 Angular.js를 사용하여 이미지를 확대하는 방법

<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>

제가 아래와 같다 + button.My 컨트롤러 측 코드를 사용하여 새 파일 필드를 생성하여 복수의 화상을 선택하고있다. 사용자가 마우스를 가져가 그 이미지에 이미지가 큰되었고입니다 것입니다 반면 여기

$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']=''; 

    }

내가 마우스 밖으로 다시 이미지가 원래 position.Here을 올 것이다 사용자가 내 plunkr working code 호야입니다 드라이브에서 이미지를 선택한 후 필요 이 문제를 해결하는 데 도움이됩니다.

출처

2017-02-14 satya

이 링크를 참조하십시오. 이 que와 비슷합니다. 모두 CSS와 관련이 있습니다 http://stackoverflow.com/questions/42219844/hover-not-working-and-i-dont-know-why – Mohammed

@Akash Ryan soln이 작동해야합니다. – Nirus

당신은 변환 를 사용하여 호버 효과를 할 CSS를 사용할 수 있습니다 규모 (1.1) :

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

출처

2017-02-14 07:13:12

예상대로 나오지 않습니다. 더 커야합니다. – satya

@satya 이것을 확인하십시오. https://plnkr.co/edit/BnBUjXn8Vs5yz1elu95F?p=preview – Nirus

을이

.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/

를 링크 - 참조 코드 - 시도

출처

2017-02-14 08:44:51

마우스를 올리면서 Angular.js를 사용하여 이미지를 확대하는 방법

답변

관련 문제