为什么当用户将鼠标悬停在图像上时图像不会更改? [英] why image not change when user mouse over to image?
问题描述
我正在尝试将鼠标悬停在图像上来缩放图像.当我第一次尝试在 overlay 上显示我的 zoomed图像时.但是当我更改光标位置时重叠或缩放图像无法显示更新的图像，为什么?这是我的代码 https://plnkr.co/edit/CluSwaohUQbsveSPNz9L?p=preview
I am trying to zoom the image on mouseover of image.When I tried first time it show my zoomed image on overlay.But when I change my cursor position
overlay or zoom image not show updated image why ?
here is my code
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();
}
推荐答案
您的事件未聚焦，因为您没有使用angularjs的触发事件代替onmousemove使用 ng-mousemove ，代替onmouseout使用 ng-mouseout
your event not focuses because you are not using angularjs's triggered events instead of onmousemove use ng-mousemove and instead of onmouseout use ng-mouseout
，在您调用的函数中，尝试仅使用angularjs函数，使用纯JavaScript可能会破坏angular的范围
and in your called functions try to use only angularjs functions, by using pure javascript you are risking to broke angular's scope
此处为工作版本
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>这篇关于为什么当用户将鼠标悬停在图像上时图像不会更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
