увеличить изображение на мыши прокрутки в angular4? - PullRequest
Новая
       1

увеличить изображение на мыши прокрутки в angular4?

0 голосов
/ 06 сентября 2018

У меня есть фрагмент кода, который будет увеличивать / уменьшать прокрутку мыши, как показано ниже 

<!DOCTYPE html>
<html>
<body>
<script src='https://www.cssscript.com/demo/image-zoom-pan-mouse-interactions-zoomnpan/zoomnpan.js'></script>
<style>
#demo {
  width: 460px;
  height: 250px;
  background-image: url(https://unsplash.it/3000/2000/?random);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
</style>

<div id="demo">
</div>

<script>
var p;
function enable(){
  p = new ZoomNPan(demo);
  p.minScale = 100;

}
enable();
</script>

</body>
</html>

Я искал ту же функциональность в угловых. У меня есть динамически генерируемые изображения, где я хочу увеличить / уменьшить масштаб прокрутки мыши.

есть ли библиотека, которая работает аналогично коду выше?

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Это будет пример и надеюсь, что он даст вам некоторую информацию в правильном направлении.

Что вы можете сделать, это перехватить события, связанные с уходом мыши, и войти в HTML: 

(mouseleave)=mouseLeave(yourLinkedID)
(mouseenter)=mouseEnter(yourLinkedID)

Теперь вы знаете, находится ли ваша мышь внутри изображения или нет. Далее вы хотите перехватить событие прокрутки.

(scroll)="onScroll($event)"

Теперь последний трюк для нас ngStyle:

[ngStyle]="{'background-size': backgroundSize}"

В вашем компоненте ввод установит значение в true, а оставит в false: 

onScroll(_ev: any) {
  if(this.entered){
    //do something with event
    //if scroll up this.backgroundSize 50% +5
    //if scroll down this.backgroundSize 50% -5
  }
}
0 голосов
/ 06 сентября 2018

Если этот скрипт работает для вас, вы можете использовать его вместо того, чтобы искать какой-либо другой готовый угловой каркас.

чтобы использовать его:

  • скачайте скрипт, который вы хотите, поместите в папку с активами или там, где вы хотите, чтобы он оставался

  • перейти к вашему angular-cli.json или иногда angular.json. и добавьте скрипт, который вы только что загрузили, в свой массив scripts, например так: 

    "scripts": [
      "../node_modules/jquery/dist/jquery.js",

      "../src/assets/js/core/jquery.perfect-scrollbar.min.js"
  ],

    здесь я добавляю Jquery и Jquery plugin.

  • в вашем угловом .ts файле компонента добавить:

    declare var ZoomNPan:any; поверх вашей @component метки.

  • используйте ваш ZoomNPan, как будто вы делаете в ванильном javascript (так же, как в вашем демо)

Примечание: Вы можете использовать этот метод для добавления всех видов сценариев.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...