Как я могу изменить источник изображения в div при перемещении мыши с помощью jquery? - PullRequest
Новая
       102

Как я могу изменить источник изображения в div при перемещении мыши с помощью jquery?

0 голосов
/ 19 февраля 2019

Я пытаюсь научить себя программировать (особенно веб-сайты).Я хорошо знаю HTML и CSS, и в настоящее время я изучаю JS.Но знаете, мне нужна помощь сообщества, чтобы добиться прогресса!

Мне интересно, как добиться этого эффекта многократного (по порядку) изменения источника изображения при каждом движении мыши?пример: http://next2nothi.ng/

После нескольких поисков я не могу найти хорошее решение для достижения этой цели ...

Заранее спасибо за вашу помощь!

Ответы [ 4 ]

0 голосов
/ 19 февраля 2019 
let listImageURL = ['urlToImg1.png','urlToImg2.png','..3.png', ... till how much you need];
let body = document.querySelector('body').addEventListener('mouseover',function(event){
     // take list of images
      for(let i = 0; i<=listImageURL.length-1;i++){
           event.target.style.background = `url(${listImageURL[i]})`;
       }
});

HTML:
<body>
</body>
0 голосов
/ 19 февраля 2019

Попробуйте 

let list=[...Array(20)].map((x,i)=>`https://picsum.photos/150/150?image=${i}`);
let index=0;

document.addEventListener("mousemove", function(){
  document.getElementById("myImg").src = list[ ++index % list.length];  
});
<img id="myImg" width="150px" heigh="150px" >
0 голосов
/ 19 февраля 2019

Здравствуйте, Ted_M, вам не нужно использовать jQuery с ним, это очень просто, и вы можете получить это несколькими строками кода, т. Е. Объявить функцию, которая будет проверять движение мыши или нет. 

var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);

Теперь вам нужно изменить URL-адрес изображения на 

document.getElementById("imageid").src="../template/save.png";

Так что теперь метод будет 

var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
  document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);

Таким образом, вы должны сохранить imageURL в массиве, еслиВы хотите сделать то же самое, что и указанная вами ссылка.Спасибо Комментарий за любую помощь.

0 голосов
/ 19 февраля 2019

Вот простой пример.Таким образом, вам нужно иметь список изображений, которые вы хотите отобразить, когда событие перемещения мыши запускается для определенного элемента Div, вы можете выбрать случайное изображение из списка и установить его в качестве фонового изображения элемента div: 

function SwapBackgroundImage(){
   var listOfImages = ['urlToimage1','urlToImage2', 'and etc'];    // so have your array
    $('#myDiv').on('mousemove',function(){
          // i am picking the first image here, but you can google how to pick a random element in an array and use that
         $(this).css('background-image', 'url(' + listOfImages[0]+ ')');
    });

} 

<div id="myDiv"></div>

Вот так.

...