Javascript 如果（（imageContainerRect.right-imgRect.right）>0 | |（imageContainerRect.left-imgRect.left）0）？（imageContainerRect.right-imgRect.righ
如果（（imageContainerRect.right-imgRect.right）>0 | |（imageContainerRect.left-imgRect.left）<0）{ 让moveBy=（（imageContainerRect.right-imgRect.right）>0）？（imageContainerRect.right-imgRect.right）：（imageContainerRect.left-imgRect.left）； moveX=（imgRect.width>parent.offsetWidth）？（parseFloat（parentTransform[0]）+moveBy）：0； transformOriginX=（transformOriginX-moveBy）； } 如果（（imageContainerRect.bottom-imgRect.bottom）>0 | |（imageContainerRect.top-imgRect.top）<0）{ 让moveBy=（（imageContainerRect.bottom-imgRect.bottom）>0）？（imageContainerRect.bottom-imgRect.bottom）：（imageContainerRect.top-imgRect.top）； moveY=（imgRect.height>parent.offsetHeight）？（parseFloat（parentTransform[1]）+moveBy）：0； transformOriginY=（transformOriginY+moveBy）； } if（scale parent.offsetWidth？真：假）； 让溢出垂直=（imgRect.height>parent.offsetHeight？true:false）； 设startX=event.pageX-translateX，startY=event.pageY-translateY； 设max_left=parentRect.left-imgRect.left； 设max_top=parentRect.top-imgRect.top； var evt=window.event； translateX=（Math.abs（evt.pageX-startX）>=max_left？（max_left*数学符号（evt.pageX-startX））：（evt.pageX-startX））； translateY=（Math.abs（evt.pageY-startY）>=max_top？（max_top*数学符号（evt.pageY-startY））：（evt.pageY-startY））； translateX=溢出\u水平？translateX:0，translateY=溢出\垂直？translateY:0； 如果（（translateX！=0）和&（translateY！=0））{ 如果（translateY>imageContainer.clientHeight/2）{parent.style['-webkit transform']='translate（'+translateX+'px'，+translateY+'px'）}else{ style['-webkit transform']='translate（'+translateX+'px'，+imageContainer.clientHeight/2+'px）' } }否则{ parent.style['-webkit transform']='' }; 返回false； } 函数tap（）{ 设imgRect=img.getBoundingClientRect（）； 让parentRect=parent.getBoundingClientRect（）； 让溢出水平=（imgRect.width>parent.offsetWidth？true:false）； 让溢出垂直=（imgRect.height>parent.offsetHeight？true:false）； 设startX=event.pageX-translateX，startY=event.pageY-translateY； 设max_left=parentRect.left-imgRect.left； 设max_top=parentRect.top-imgRect.top； var evt=window.event； translateX=（Math.abs（evt.pageX-startX）>=max_left？（max_left*数学符号（evt.pageX-startX））：（evt.pageX-startX））； translateY=（Math.abs（evt.pageY-startY）>=max_top？（max_top*数学符号（evt.pageY-startY））：（evt.pageY-startY））； translateX=溢出水平？translateX:0，translateY=溢出垂直？translateY:0； 如果（（translateX！=0）和&（translateY！=0））{ 如果（translateY>imageContainer.clientHeight/2）{ style['-webkit transform']='translate（'+translateX+'px'+translateY+'px）' }否则{ parent.style['-webkit transform']='translate（'+translateX+'px'，+imageContainer.clientHeight/2+'px）' } }否则{ parent.style['-webkit transform']='' }; } 函数makeDragable（事件）{ 父节点=img.parentNode； imageContainer=img.parentNode.parentNode； $（父）.css({ “显示”：“-webkit-box”， “-webkit-box-pack”：“中心”， “-webkit-box-align”：“居中”， “z指数”：“5” }); $（imageContainer）.css({ “文本对齐”：“居中”， “边距”：“0”， “填充”：“0”， “溢出”：“隐藏”， “-webkit-用户-选择”：“无”， “光标”：“上下文菜单”， }); 设imgRect=img.getBoundingClientRect（）； 让parentRect=parent.getBoundingClientRect（）； 让溢出水平=（imgRect.width>parent.offsetWidth？true:false）； 让溢出垂直=（imgRect.height>parent.offsetHeight？true:false）； 设startX=event.pageX-translateX，startY=event.pageY-translateY； 设max_左=paJavascript 如果（（imageContainerRect.right-imgRect.right）>0 | |（imageContainerRect.left-imgRect.left）0）？（imageContainerRect.right-imgRect.righ,javascript,angularjs,Javascript,Angularjs,如果（（imageContainerRect.right-imgRect.right）>0 | |（imageContainerRect.left-imgRect.left）0）？（imageContainerRect.right-imgRect.right）：（imageContainerRect.left-imgRect.left）； moveX=（imgRect.width>parent.offsetWidth）？（parseFloat（parentTransform[0]）+moveBy
var camListApp = angular.module('camListApp', ['ui.bootstrap'])
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){
$scope.custom = true;
$scope.toggleCustom = function(url) {
$scope.custom = ! $scope.custom;
$scope.imageView = url;
};
$http.get('http://localhost:8082/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
}]);
<div ng-controller="Hello" class="col-xs-12">
<b>Search:</b><br>
<input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'">
<br>
<br>
<br>
<br>
<table border = 1 class="table table-striped table-hover" style="width:45%">
<thead>
<tr>
<th><center>CamID</th></center>
<th><center>Timestamp</th></center>
<th><center>View Image</center></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><center> <button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">View</center></button></td>
</tr>
</tbody>
</table>
<span id="myDIV" ng-hide="custom">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400">
</span>
<!--<span ng-hide="custom">To:
<input type="text" id="to" />
</span>-->
<span ng-show="custom"></span>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>
</body>
</html>
<span id="myDIV" ng-hide="custom">
<img id="view" ng-src="http://www.w3schools.com/css/{{imageView}}" width="300" height="300" ng-click="zoom()">
</span>
$scope.zoom = function() {
var imageId = document.getElementById('view');
if(imageId.style.width == "400px"){
imageId.style.width = "300px";
imageId.style.height = "300px";
}else{
imageId.style.width = "400px";
imageId.style.height = "400px";
}
(function () {
angular
.module('app')
.directive('zoom', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var img = elem[0];
$(img).css({
"position": "absolute",
"top": "0",
"bottom": "0",
"left": "0",
"right": "0",
"margin": "auto",
"padding-left": "1px",
"padding-right": "1px",
"padding-top": "1px",
"padding-bottom": "1px",
"-webkit - user - select": "none",
"-webkit - user - drag": "none"
});
var imageContainer = img.parentNode.parentNode;
$(imageContainer).css({
"text-align": "center",
"margin": "0",
"padding": "0",
"height": "100%",
"max- height": "100%",
"width": "100%",
"background-color": "#000",
"overflow": "hidden",
"-webkit - user - select": "none",
"cursor": "context - menu",
});
var parent = img.parentNode;
$(parent).css({
"width": "100%",
"height": "auto",
"margin": 0,
"padding": 0,
"display": "-webkit - box",
"-webkit - box - pack": "center",
"-webkit - box - align": "center",
"z-index": "5"
});
var currentScale = 1;
var currentRotation = 90
let transformOriginX = 0, transformOriginY = 0;
let translateX = 0, translateY = 0;
function setTransformOrigin() {
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let visibleWidth = (imgRect.width > parent.offsetWidth) ? imgRect.left + parentRect.width : imgRect.width;
let visibleHeight = (imgRect.height > parent.offsetHeight) ? imgRect.top + parentRect.height : imgRect.height;
let beginX = parentRect.right - visibleWidth, beginY = parentRect.bottom - visibleHeight;
let endX = beginX + visibleWidth, endY = beginY + visibleHeight;
let midX = beginX + ((endX - beginX) / 2), midY = beginY + ((endY - beginY) / 2);
// if (midY > imageContainer.clientHeight / 2) midY = imageContainer.clientHeight / 2;
//if (midX > imageContainer.clientWidth / 2) midX = imageContainer.clientWidth / 2;
if (midY > imageContainer.clientHeight / 2) { parent.style.transformOrigin = midX + 'px ' + midY + 'px' } else {
parent.style.transformOrigin = midX + 'px ' + imageContainer.clientHeight / 2 + 'px'
}
}
function scaleImage(scale, event) {
img.style.transform = 'scale(' + scale + ') ' + 'rotate(' + (currentRotation - 90) + 'deg)';
if (scale < currentScale) {
let imgRect = img.getBoundingClientRect();
let imageContainerRect = imageContainer.getBoundingClientRect();
if (parent.style.transform.match('translate')) {
let parentTransform = parent.style.transform.replace('translate(', '').replace(')', '').split(', ');
let moveX = parentTransform[0].replace('px', ''), moveY = parentTransform[1].replace('px', '');
if ((imageContainerRect.right - imgRect.right) > 0 || (imageContainerRect.left - imgRect.left) < 0) {
let moveBy = ((imageContainerRect.right - imgRect.right) > 0) ? (imageContainerRect.right - imgRect.right) : (imageContainerRect.left - imgRect.left);
moveX = (imgRect.width > parent.offsetWidth) ? (parseFloat(parentTransform[0]) + moveBy) : 0;
transformOriginX = (transformOriginX - moveBy);
}
if ((imageContainerRect.bottom - imgRect.bottom) > 0 || (imageContainerRect.top - imgRect.top) < 0) {
let moveBy = ((imageContainerRect.bottom - imgRect.bottom) > 0) ? (imageContainerRect.bottom - imgRect.bottom) : (imageContainerRect.top - imgRect.top);
moveY = (imgRect.height > parent.offsetHeight) ? (parseFloat(parentTransform[1]) + moveBy) : 0;
transformOriginY = (transformOriginY + moveBy);
}
if (scale <= 1) { translateX = 0; translateY = 0; }
parent.style.transformOrigin = transformOriginX + 'px ' + transformOriginY + 'px';
}
}
currentScale = scale;
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
var evt = window.event;
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight/2) { parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)' } else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
return false;
}
function tap() {
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
var evt = window.event;
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight / 2) {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'
} else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+ 'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
}
function makeDraggable(event) {
parent = img.parentNode;
imageContainer = img.parentNode.parentNode;
$(parent).css({
"display": "-webkit - box",
"-webkit - box - pack": "center",
"-webkit - box - align": "center",
"z-index": "5"
});
$(imageContainer).css({
"text-align": "center",
"margin": "0",
"padding": "0",
"overflow": "hidden",
"-webkit - user - select": "none",
"cursor": "context - menu",
});
let imgRect = img.getBoundingClientRect();
let parentRect =parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
window.onmousemove = function (evt) {
if (evt == null) { evt = window.event; }
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight) {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'
} else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+ 'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
return false;
}
window.onmouseup = function (evt) {
setTransformOrigin();
window.onmousemove = null;
}
return false;
};
img.addEventListener('mousedown', function () { makeDraggable(event); });
elem.bind('mousewheel', function (e) {
var img = e.currentTarget.style.width;
var scaleX = e.currentTarget.getBoundingClientRect().width / e.currentTarget.offsetWidth;
var w = "";
var resW = "";
var resL = "";
var resT = "";
var zValue = 1.2;
var newScale = scaleX * zValue;
var newScale = "scale(1)";
var val = parseInt(w.replace('%', ''));
if (e.originalEvent.wheelDelta / 120 > 0) {
newScale = scaleX * zValue;
}
else {
if ((scaleX / zValue) > 1) {
newScale = scaleX / zValue
} else {
newScale = 1.0;
}
}
scaleImage(newScale, e);
setTransformOrigin();
window.onmousemove = null;
});
}
}
}]);
})();
<image zoom src="" ></image>