我正在創建一個帶有固定導航的單頁網站。有4個不同的部分。當用戶單擊導航中的鏈接時,我想淡化導航的顏色以匹配它所需的部分的主題。這樣做最好的方法是什麼?我嘗試了很多不同的東西,但似乎沒有達到我要的樣子。 -提前致謝!創建導航時滾動到元素時會淡入不同的顏色
回答
所以你需要一些事情來完成這件事。
- 導航層上面坐着其他層
- 堆疊背景圖層與靜態背景顏色每個部分 當前顏色和新的部分顏色
而且你會做什麼與是
編輯
這裏是這樣做的一個非常基本的例子。應該可能有更多的結構,更好的樣式,或許更多的代碼狀態管理。但是,單擊鏈接將顯示顏色漸變。
- JS
$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
$(".pane:visible,.section:visible").fadeOut("slow");
var color = this.getAttribute("data-color");
$("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});
- HTML
<div id="layers">
<div id="navLinks">
<div data-color="red">about</div>
<div data-color="green">contact</div>
<div data-color="blue">overview</div>
<div data-color="orange">links</div>
</div>
<div id="redPane" class="pane"></div>
<div id="greenPane" class="pane"></div>
<div id="bluePane" class="pane"></div>
<div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
<div id="redSection" class="section">about</div>
<div id="greenSection" class="section">contact</div>
<div id="blueSection" class="section">overview</div>
<div id="orangeSection" class="section">links</div>
</div>
- CSS
#layers{
position:relative;
}
#navLinks div{
font-weight:bold;
font-size:110%;
text-decoration:underline;
cursor:pointer;
position:relative;
z-index:1;
}
.section{
display:none;
height:100px;
width:100px;
position:absolute;
}
#redSection{
background-color:red;
}
#greenSection{
background-color:green;
}
#blueSection{
background-color:blue;
}
#orangeSection{
background-color:orange;
}
.pane{
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
display:none;
}
#redPane{
background-color:red;
}
#greenPane{
background-color:green;
}
#bluePane{
background-color:blue;
}
#orangePane{
background-color:orange;
}
#contentArea{
position:relative;
}
我非常直觀。小心向我展示一個簡單的例子?我將不勝感激。 – TheDesigner
@TheDesigner - 請參閱編輯一個非常簡短的演示。 –
這是非常好的。只是我正在尋找的效果類型。但是,數據顏色絕對必要嗎?我做了類似這樣的事情,但不幸的是它與我正在使用的CMS不兼容......是否可以用「id」替換,然後在js中替換? – TheDesigner
- 1. 滾動時更改導航欄顏色
- 2. 滾動時JQuery導航菜單不會改變顏色
- 3. 想要在滾動到特定元素時更改導航顏色
- 4. 更改導航欄的顏色,同時滾動
- 5. 從頂部滾動時淡入淡出背景顏色
- 6. jQuery - 滾動頁面時淡出元素,淡入滾動時返回頂部
- 7. .JS在滾動瀏覽元素後在導航條中淡入
- 8. 同時淡入和淡出兩個不同元素的轉換
- 9. jquery - 我們滾動時如何淡入淡出元素(div)
- 10. 如何在滾動時淡入淡出元素?
- 11. 淡入滾動時
- 12. 我滾動後,試圖淡入我的導航欄的背景顏色
- 13. jQuery滾動到div上同時淡入淡出和動畫
- 14. 即時創建一個DOM元素,但在淡入淡出
- 15. 滾動時創建HTML元素
- 16. 如何淡入/淡出導航欄,滾動後會得到修復?
- 17. 單擊不同元素時更改元素的背景顏色
- 18. 使導航欄更換滾動顏色?
- 19. 創建滾動導航欄
- 20. Jquery使用scrollTop()淡入滾動條在Xpx時的元素
- 21. JQuery滾動控制導航的不透明度淡入,如何停止反向滾動導航淡出?
- 22. 從不同的顏色淡入
- 23. 當用戶向下滾動時,元素會淡入,如何添加動畫
- 24. 淡出固定導航欄向下滾動時,淡入當頁面頂部
- 25. 第一次元素動畫時遇到淡入淡出
- 26. 如何在滾動時更改菜單元素的顏色?
- 27. 爲什麼動態創建的元素不會淡出?
- 28. 如何在頁面滾動時使元素淡入?
- 29. 元素淡入滾動PURE香草javascript
- 30. 如何在滾動後淡入元素
請發表你嘗試過什麼都碼 – Sanoob
我寧願沒有改變糟糕的代碼伊夫已經嘗試過。我希望開始新鮮,正確地做事。 – TheDesigner