18 lines
675 B
HTML
18 lines
675 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>
|