水平滾動只有一個div

我需要的是具有背景圖像和另一個可以水平滾動的.png圖像的div。 http://prntscr.com/9d0d25 水平滾動只有一個div

我需要的背景下保持固定和汽車X和Z水平移動到上向下滾動的權利（和回留在向上滾動。當車都看不見了我想要的網站進行垂直滾動到網站的其他內容（以及向上滾動滾動與巴紐水平回div時）

HTML結構是這樣的：

<div class="bgimage"> // has a background in css 
    <div class="cars"> 
     <img src="images/cars.png" /> 
    </div> 
</div> 
<div class="othercontent"> 
</div>

但是我有幾乎沒有經驗的JavaScript，所以我不知道如何實現。

（我GOOGLE了視差，卻發現只爲完全水平或垂直網站的例子，這是不是非常敏感」

來源

2015-12-11 Dennis Novac

聽起來像某種視差，你綁定到滾動事件，並根據用戶滾動移動屏幕上的東西。如果你不知道如何編寫javascript，這可能不是最簡單的事情，而且這不是人們爲你編寫代碼的編碼服務嗎？ – adeneo

@adeneo對不起，我不是說有人爲我寫代碼，只是有幾條指令，如果有人知道如何。我可以寫javascript，我只是新手，所以我不知道我應該做的大部分事情：\ –

我會在路上幫你一把 - > http：// jsfiddle。 net/3gn6abq8/ – adeneo

如果你使用jQuery，您可以使用$(window).on('scroll', function(){})來觀看滾動事件

這裏有一個簡單的一個我所做的：

var lastScrollTop = 0; 
$(window).on('scroll', function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     //Scrolling Down 
     $('.cars').css('left',st + "px"); 
    } else { 
     //Scrolling Up 
     $('.cars').css('left', st + "px"); 
    }  
});

Fiddle

來源

2015-12-11 19:25:03 OpuLance

在鼠標滾輪運動

var mouseWheelEvt = function (event) { 
    if (document.body.doScroll) 
     document.body.doScroll(event.wheelDelta>0?"left":"right"); 
    else if ((event.wheelDelta || event.detail) > 0) 
     document.body.scrollLeft -= 10; 
    else 
     document.body.scrollLeft += 10; 

    return false; 
} 
document.body.addEventListener("mousewheel", mouseWheelEvt);

來源

2015-12-11 19:39:59 Tanmay

水平滾動只有一個div

回答

相關問題