使用JavaScript在mouseover上全方位平移背景圖像

我想在頁面中爲背景圖像添加平移效果，圖像相當大1800 x 1067，所以基本上會比窗口大我想當鼠標到達窗口的盡頭時，平移所有方向的背景，我發現了一個Javascript代碼，它可以進行平移，但只是水平方向，嘗試使用它來啓用垂直平移。沒有工作。使用JavaScript在mouseover上全方位平移背景圖像

這裏是的jsfiddle代碼：http://jsfiddle.net/v662t/

// HTML

<div id="pageBg"> 
</div>

// CSS

#pageBg { 
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll; 
    background-size: cover; 
    height: auto; 
    left: 0; 
    min-height: 768px; 
    min-width: 1024px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

//使用Javascript

$(document).ready(function(){ 
    $('#pageBg').mousemove(function(e){ 
     var mousePosX = (e.pageX/$(window).width())*100; 
     $('#pageBg').css('background-position-x', mousePosX +'%'); 
    }); 
});

來源

2013-01-23 Rami Sarieddine

你可以在jsfiddle中做一個模擬的問題嗎？ http://jsfiddle.net –

我剛剛做到了。謝謝 –

刪除background-size: cover條並添加一些JavaScript的線mousePosY：這裏

var mousePosY = (e.pageY/$(window).height())*100; 
$('#pageBg').css('background-position-y', mousePosY +'%');

退房的工作小提琴：http://jsfiddle.net/georgedyer/XWnUA/2/

來源

2013-01-23 20:58:10 georgedyer

太棒了！並感謝你。我還有一個問題：我如何才能讓它在達到邊緣時才平移（比如窗口的最後50px）？ –

看到我的其他答案在邊緣平移。 – georgedyer

我回答了有關評論在這裏邊平移，包括更好的格式。

這取決於究竟是你想在邊緣平移工作。只有在鼠標移過邊緣時，或者即使鼠標一動不動但在邊緣上懸停時，圖像纔會移動嗎？

在第一種情況：你可以使用相同的代碼，小提琴，只是檢查，看看是否mousePosX或mousePosY是< 10或> 90（或任何百分率值要定義爲邊）。如果是這樣，那麼不是將圖像移動到窗口的某個百分比，而是將其移動到邊緣的某個百分比。

由於最終可能有點過於敏感，所以你可以只移動上懸停的替代，在這種情況下，你會使用mouseEnter和mouseLeave事件，而不是去，只是mouseEnter啓動的時間間隔（使用var interval = setInterval(moveImage,250); ）將背景圖像移動一個像素，然後在mouseLeave上清除該間隔（clearInterval(interval);）。

我會給你編輯the fiddle你自己，看看你能否得到它的工作方式。

來源

2013-01-24 14:35:27 georgedyer

我試着通過檢查mousePosX或mousePosY是否爲< 10 or > 90來嘗試選項1，但它看起來像是在跳躍。我不能以平滑的過渡來做到這一點，就像將圖像從其位置平移到邊緣一樣？ –

我爲＃2方法做了一個小提琴，我更喜歡它：http://jsfiddle.net/georgedyer/RRPsa/ ...你可以使用變量'scrollSpeed'設置滾動靈敏度/速度 – georgedyer

整齊的代碼！謝謝！ –

使用JavaScript在mouseover上全方位平移背景圖像

回答

相關問題