我在我的应用程序中使用ElevateZoom插件。如果图像分辨率良好,则可以缩放,但是当图像分辨率较小时,则无法使用。 这是代码:
description.jsp
<img ng-if="mlist.typeId===1"
ng-elevate-zoom
zoom-image="{{mlist.mediaUrl}}" id="zimg{{$index}}"
actual-src="{{mlist.mediaUrl}}" loader-src="resources/images/loading.gif" loader-class="preloader" showloader
class="img-responsive zoomImg" alt=""/>
其中缩放图像,实际src数据缩放图像都具有相同的图像。
app.js
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
//Will watch for changes on the attribute
attrs.$observe('zoomImage',function(){
linkElevateZoom();
})
function linkElevateZoom(){
//Check if its not empty
if (!attrs.zoomImage) return;
element.attr('data-zoom-image',attrs.zoomImage);
$(element).elevateZoom({zoomType:"lens", cursor:"crosshair"/*, lensSize:250*//**/ /*scrollZoom:true*//*, containLensZoom:true*/});
}
linkElevateZoom();
}
};
});
插件:elevatezoom