2
Fork 0
definma-ui/src/app/img-magnifier/img-magnifier.component.html

18 lines
598 B
HTML

<div class="img-container">
<div class="magnifier"
[ngStyle]="{
'background-size': backgroundSize,
'background-image': 'url(\'' + src + '\')',
'background-position': '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
left: magnifierPos.x + 'px',
top: magnifierPos.y + 'px',
width: magnifierSize.width + 'px',
height: magnifierSize.height + 'px'
}"
(mousemove)="calcPos($event)"
(mouseleave)="showMagnifier = false"
*ngIf="showMagnifier">
</div>
<img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
</div>