почему изображение не меняется, когда пользователь наводит курсор на изображение - PullRequest
Новая
       0

почему изображение не меняется, когда пользователь наводит курсор на изображение

0 голосов
/ 09 января 2019

Я пытаюсь увеличить изображение при наведении курсора мыши на изображение. Когда я пытался в первый раз, он показывает zoomed image на overlay. Но когда я меняю положение курсора overlay или увеличенное изображение не показывает обновленное изображение, почему? вот мой код https://plnkr.co/edit/CluSwaohUQbsveSPNz9L?p=preview

 $scope.zoomIn= function(event) {
  var element = document.getElementById("overlay");
  element.style.display = "inline-block";
  element.style.backgroundImage = 'url('+$scope.img+')'
  var img = document.getElementById("imgZoom");
  var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
  var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
  element.style.backgroundPosition=(-posX*2)+"px "+(-posY*4)+"px";
   // $scope.$apply();
}

 $scope.zoomOut= function() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
    //  $scope.$apply();
}

1 Ответ

0 голосов
/ 09 января 2019

ваше событие не фокусируется , потому что вы не используете инициированные события angularjs вместо onmousemove используйте ng-mousemove и вместо onmousemout используйте ng-mouseout

и в вызываемых вами функциях старайтесь использовать только функции angularjs, используя чистый javascript, вы рискуете нарушить область видимости angularj

здесь рабочая версия 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
   $scope.zoomIn= function(event) {
  var element = document.getElementById("overlay");
  element.style.display = "inline-block";
  element.style.backgroundImage = 'url('+$scope.img+')'
  var img = document.getElementById("imgZoom");
  var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
  var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
  element.style.backgroundPosition=(-posX*2)+"px "+(-posY*4)+"px";
   // $scope.$apply();
}

 $scope.zoomOut= function() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
    //  $scope.$apply();
}
  $scope.img = 'http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg';
});
/* Put your css in here */

#overlay{
  border:1px solid black;
  width:350px;
  height:300px;
  display:inline-block;
  background-repeat:no-repeat;
  
}
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
<img id="imgZoom" 
width="300px" 
height="200px" 
ng-mousemove="zoomIn($event)" 
ng-mouseout="zoomOut()" 
src="{{img}}">
<br/>
<div id="overlay" ng-mousemove="zoomIn(event)"></div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...