基於鼠標位置的兩個圖像之間的更改

-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

謝謝，我試圖解釋得更清楚。主要問題是基於鼠標位置的平滑過渡，我沒有找到這個實現，也許有人可以指出我正確的方向。 –

基於鼠標位置的兩個圖像之間的更改

回答

相關問題