在html5中製作靜態網頁應用程序，並需要在背景圖片中滾動圖片

-3

這很難用言語解釋，但基本上是製作一個模擬應用程序來演示我們即將實施的新UI的功能。我在這裏實習，剛開始使用這個html，css和jquery。在html5中製作靜態網頁應用程序，並需要在背景圖片中滾動圖片

有一張背景圖片中的項目列表，必須能夠在背景中上下滾動，如果離開div，則隱藏。任何想法如何做到這一點？我能想到的唯一一件事就是澄清我需要幫助的內容，包括一張照片。圖片顯示了應用程序（爲了安全起見，我把所有東西都拿出來了），這些水平線是一個列表。現在這只是一個圖像，但我會做另一個應該上下滾動，只能在div中可見的圖像。任何想法如何做到這一點？

只是爲了澄清，我不是在尋找一份講義或爲別人寫這段代碼給我。我花了很多時間在網上試圖找到一種方法來做到這一點，但我永遠不會用一種能夠讓我得到我想要的結果的方式來提出問題。我是新手，對這些工具所有可能的事情有基本的瞭解。只是尋找某人指引我走向正確的方向，無論是我可以研究的方法還是指向另一個網站的鏈接，可以更深入地解釋此主題。

HTML：

<div id="background"> 
    <div id="container"></div> 
</div>

CSS：

#container { 
    overflow:auto; 
    left:100px; 
    top:100px; 
    width:200px; 
    height:300px; 
    background-image:url('images/scroll.png'); 
}

來源

2014-09-10 KP123

「我該怎麼做這個」不是問題的一種，將在這裏得到你很多的幫助。你應該做一些嘗試，發佈你有困難的代碼並遵循這些指導。 http://stackoverflow.com/help/how-to-ask更好的辦法是創建一個jsFiddle來展示你的代碼問題。 – 2014-09-10 19:20:45

很遺憾，SO用戶寧願避開新人而不願提供幫助。特別是當他們甚至說他們是新手。你如何期待他們知道該問什麼，讓他們甚至不知道可能性時讓他們成爲一個jsFiddle。 -嘆。我對你爲之付出努力的純粹事實讚不絕口，甚至包含了你所需要的「模擬」。 – Tony 2014-09-10 19:35:12

@Tony僅僅因爲某人是新人並不意味着他們不應該做他們的研究並做出某種嘗試。也許他們會google jsFiddle並學習一些有用的東西。 – 2014-09-10 19:53:49

這裏是一個真正的通用版本讓你去，裏面的內容是可以改變的，以申報單或什麼，但是這說明添加背景到單個項目，其中具有文本，有一個固定大小的窗口，並允許內容滾動。

這裏的關鍵是將你的容器設置爲「overflow：auto」，移出屏幕的背景應該應用於包含「list item」的元素。

jsFiddle Example

HTML：

<div class="container fake-list"> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div> 
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>

CSS：

.container { 
    height: 200px; 
    width:300px; 
    overflow:auto; 
    border: 2px solid #ccc; 
    margin: 20px; 
} 

ul { list-style-type: none; padding: 0; margin:0;} 

li { 
    background-image:url('IMAGEURL'); 
    border-bottom:1px dotted black; 
    padding:10px; 
} 

.fake-list { 
    background-image:url('IMAGEURL'); 
} 

.fake-list-item { 
    padding:10px; 
    border-bottom:1px dotted black; 
} 
.fake-list-item:nth-of-type(odd) { 
    background-image:url('IMAGEURL'); 
} 

img.smile { 
    height: 25px; 
    width:25px; 
    content: url('IMAGEURL'); 
}

來源

2014-09-10 19:48:56 Tony

我明白你在做什麼。我沒有使用列表，因爲我試圖在背景上放置另一個圖像並讓圖像滾動。你是怎麼從沒有任何ID的html文件調用你的CSS代碼的？ – KP123 2014-09-10 22:20:03

我更新了jsFiddle檢查出來，技術上你可以用列表來做，但是我使用了divs，因爲你提到了它們。谷歌「CSS選擇器」，你會看到一堆不同的方式。我使用標籤作爲選擇器，我添加了一些類作爲如何使用我的更新引用它們的示例。 – Tony 2014-09-11 02:24:53

如果你試圖與固定大小的一個div的內容進行滾動時，啤酒的DIV本身，僅僅指剛申請的CSS溢出：汽車;到div。或者使滾動條總是使用overflow-y：scroll;

<style type"text/css"> 
#container { 
    width:200px; height: 100px; overflow: auto; 
    background-image:url('path/to/image.png'); 
} 
</style> 
<div id="conatiner"> 
    [List of items] 
</div>

來源

2014-09-10 19:29:33 JHoffmann

在html5中製作靜態網頁應用程序，並需要在背景圖片中滾動圖片

回答

相關問題