Jquery изменить setInterval скорость с позицией мыши - PullRequest
Новая
       23

Jquery изменить setInterval скорость с позицией мыши

0 голосов
/ 20 апреля 2020

Я бы хотел, чтобы глаз становился все быстрее и быстрее, когда мышь приближается, как в этом примере с сердцем:

enter image description here

с этим глаз (без круга):

enter image description here

Мне удалось заставить его мигать, но я все еще пытаюсь изменить интервальную скорость во время движения курсора. Вот мой код: 

var mX, mY, distance, intervalSpeed = 500, interval,
		intervalSpeedMax = 500;
		intervalSpeedMin = 100;
		max_distance = 213,
        $distance = $('#distance'),
        $element  = $('.icone');

	    function calculateDistance(elem, mouseX, mouseY) {
	        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
	    }


	   $(".wrapper").on('mouseenter', function(){

	   		interval = setInterval(function(){
	   			$(".first").toggle();
	   			$(".second").toggle();
	   		}, intervalSpeed);

			$(document).mousemove(function(e) {  
		        mX = e.pageX;
		        mY = e.pageY;
		        distance = calculateDistance($element, mX, mY);
		        $distance.text("distance : " + distance);

		        // Calcul de l'interval
		        intervalSpeed = ((intervalSpeedMax - intervalSpeedMin) * distance / max_distance ) + intervalSpeedMin;
	    
	    	});		
   				
   		});
	   		
		
	   $(".wrapper").on('mouseleave', function(){
	   		clearInterval(interval);
	   		$(".first").show();
	   		$(".second").hide();
	   });
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100%;
		}
		.wrapper{
			width: 300px;
			height: 300px;
			background-color: salmon;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		#distance{
			position: absolute;
			top: 5px;
			left: 5px;
		}
		.icone{
			width: 50px;
			height: 50px;
			position: relative;
		}
		img{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		img:first-of-type{
			
		}
		img:nth-of-type(2){
			display: none;
			top: 20px;
		}

		
	</style>

</head>
<body>

	<div class="wrapper">
		<span id="distance"></span>
		<div class="icone">
			<img class="first" src="https://i.ibb.co/ysX2Hm0/Fichier-4.png">
			<img class="second" src="https://i.ibb.co/mBFRn0V/Fichier-3.png">
		</div>
	</div>
  </body>
  </html>

Признаюсь, глаз не идеален, но здесь дело не в этом. Мне не удается плавно изменить интервальную скорость.

1 Ответ

0 голосов
/ 21 апреля 2020

Мне удалось найти решение, используя функцию setTimeOut. Я создал функцию «animDisplay», вызываемую, когда мышь входит внутрь квадрата лосося. В этой функции задержка рассчитывается в соответствии с положением мыши следующим образом: 

var mX, mY, distance, intervalSpeed = 500, interval,
    intervalSpeedMax = 500;
    intervalSpeedMin = 100;
    max_distance = 213,
    $distance = $('#distance'),
    $element  = $('.icone');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    function animDisplay(){
        $(".first").toggle();
        $(".second").toggle();
        window.addEventListener('mousemove', function(e){
            mX = e.x;
            mY = e.y;
        });
        distance = calculateDistance($element, mX, mY);
        intervalSpeed = ((intervalSpeedMax - intervalSpeedMin) * distance / max_distance ) + intervalSpeedMin;
        interval = setTimeout(animDisplay, intervalSpeed);
    }


   $(".wrapper").on('mouseenter', function(){
        animDisplay();  
    });


   $(".wrapper").on('mouseleave', function(){
        clearInterval(interval);
        $(".first").show();
        $(".second").hide();
   });
...