基于鼠标位置的两个图像之间的更改

-3

我现在找不到示例。基于鼠标位置的两个图像之间的更改

我希望我的图像位于div中的背景图像随鼠标的位置而改变，并且如果可能，请使用手机滑动。

默认情况下会显示两张图片，第一张图片的左侧为50％，右侧为50％。

然后，当用户在图像上进行鼠标悬停时，一个图像会根据鼠标位置重叠另一个图像。例如，当用户在图像上的鼠标悬停时，比如0.3的水平尺度为1时，他会看到第一张图像的左侧30％和第二张图像的70％。

这个过渡应该是平滑的，如果有意义的话，几乎每个像素都会改变。

来源

2017-05-20 Olya Bogdanova

大家投票的原因是什么，低估了我的问题？我应该对此进行任何更改吗？我找不到解决我的问题在谷歌使用不同的关键字，所以我不认为这是愚蠢的，可以帮助很多人 –

你的意思是这样吗？

$(function(){ 
 
    var containerWidth = 190; 
 
    // var intervalFlag = false; 
 
    // var updateIntervalFlag; 
 
    $(".cover").mouseenter(function(){ 
 
    $(".image1").css("transition", "initial"); 
 
    // updateIntervalFlag = setInterval(() => intervalFlag = true, 25); 
 
    }); 
 
    $(".cover").mousemove(function(e){ 
 
    // if(intervalFlag){ 
 
    // intervalFlag = false; 
 
     var cursorX = e.clientX - $(this).offset().left; 
 
     var percentage = cursorX/containerWidth * 100; 
 
     $(".image1").css("width", percentage + "%"); 
 
    // } 
 
    }); 
 
    $(".cover").mouseleave(function(){ 
 
    $(".image1").css("transition", "width 0.3s"); 
 
    $(".image1").css("width", "50%"); 
 
    // clearInterval(updateIntervalFlag); 
 
    }); 
 
});

body{ 
 
    background-color: #333; 
 
} 
 

 
.container{ 
 
    margin: 0 auto; 
 
    width: 190px; 
 
    height: 190px; 
 
    position: relative; 
 
    background-color: #333; 
 
    box-shadow: 0px 0px 50px -3px black; 
 
} 
 

 
.image1{ 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 50%; 
 
    background-image: url(http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/nightlights-000882-gradient-dark-blue-300x300.jpg); 
 
    z-index: 1; 
 
    background-size:cover; 
 
    border-right: 1px solid black; 
 
} 
 
.image2{ 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
    background-position: right; 
 
    background-image: url(http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/swirly-flowers-000761-orange-red-dark-orchid-300x300.jpg); 
 
    background-size:cover; 
 
} 
 
.cover{ 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container"> 
 
    <span class="image1"></span> 
 
    <span class="image2"></span> 
 
    <div class="cover"></div> 
 
    </div> 
 
</body>

我还包含（如注释行），以设置的时间间隔，用于计算新的宽度的能力。这也可能有用。

来源

2017-05-20 11:39:14

这是有点很难理解你的意思是什么：

两个图像应该默认显示，左边的第一个图像的50％，第二权 50％。当用户在图像上鼠标悬停时，比如0.3的x轴为1时，他会看到第一张图像的左侧30％和第二张图像的70％。

但我想你可以创建一个适合你的需要的JS函数，并用onmouseover/onmousedown/...把它注册到相应的HTML元素中......无论你想做什么。

编辑：

啊，我想我现在明白了。使用onmousemove，从事件中获取鼠标位置，相应地计算两个图像的新宽度，并通过DOM访问设置它们（例如document.getElementById("img1").style.width="30%";,document.getElementById("img2").style.width="70%";）。

来源

2017-05-20 08:27:01 aabbcccc

谢谢，我试图解释得更清楚。主要问题是基于鼠标位置的平滑过渡，我没有找到这个实现，也许有人可以指出我正确的方向。 –

基于鼠标位置的两个图像之间的更改

回答

相关问题