时间戳

首页 > 解决方案 > Jquery用鼠标位置改变setInterval速度

jquery - Jquery用鼠标位置改变setInterval速度

问题描述

当鼠标靠近时，我想让眼睛眨得越来越快，就像这个带有心脏的例子：

在此处输入图像描述

用这只眼睛（没有圆圈）：

在此处输入图像描述

我设法让它闪烁，但我仍在尝试在光标移动时更改间隔速度。这是我的代码：

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>

我承认眼睛并不完美，但这不是重点。我无法使间隔速度平滑变化。

标签： jqueryanimationcursormouseeventsetinterval

解决方案

我设法使用 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();
   });

推荐阅读