機(jī)端左右滑動(dòng)導(dǎo)航,html正常寫,css超出不換行,隱藏滾動(dòng)條
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內(nèi)容滑動(dòng)與導(dǎo)航時(shí)時(shí)對(duì)應(yīng)</title> </head> <link rel="stylesheet" href="../../script/bootstrap/dist/css/bootstrap.min.css"> <script type="text/javascript" src="../../jquery-1.10.2.js"></script> <script type="text/javascript" src="mundo-test.js"></script> <style type="text/css"> .sidenav{ font-weight: bold !important; color: red !important; background: #0f0f0f !important; display: inline-block; height: 40px; width: 100px; margin-top: 20px; font-size: 20px; text-align: center; padding-top: 6px; } .sidenav-first{ font-weight: normal; color: #74aaf9; background: #e8f2ff; display: inline-block; height: 40px; width: 100px; margin-top: 20px; font-size: 20px; text-align: center; padding-top: 6px; } .test{ background: antiquewhite; font-size: 18px; color: blueviolet; padding: 23px 50px; margin-top: 20px; } p{ line-height: 40px; } </style> <body> <div class="col-sm-2"> <div id="menu" style="position: fixed;"> <ul> <li><a href="#test1" class="sidenav-first sidenav test1">首頁(yè)</a></li> <li><a href="#test2" class="sidenav-first test2">第一頁(yè)</a></li> <li><a href="#test3" class="sidenav-first test3">第二頁(yè)</a></li> <li><a href="#test4" class="sidenav-first test4">第三頁(yè)</a></li> <li><a href="#test5" id="test-last" class="sidenav-first test5">第四頁(yè)</a></li> </ul> </div> </div> <div class="col-sm-10"> <div id="content"> <div class="test" id="test1"> <h1>首頁(yè)</h1> <p> 作曲 : 家家 作詞 : 家家 編曲:家家 還有什么等待還有什么悲哀 這故事中的人不太精彩 夏去了又回來(lái)而人卻已不在 它重復(fù)著我洶涌的忍耐 今年蘭花又開開了它也會(huì)敗 我想 把心慢慢的釋懷 我知道從一開始隨隨便便深深淺淺 不過(guò)是愛的自由不計(jì)前嫌不知疲倦 永遠(yuǎn)太遠(yuǎn)走遠(yuǎn)遙遠(yuǎn) 不過(guò)是愛的自由不計(jì)前嫌不知疲倦 永遠(yuǎn)太遠(yuǎn)走遠(yuǎn)遙遠(yuǎn) 放開不再拖欠 </p> </div> <div class="test" id="test2"> <h1>第一頁(yè)</h1> <p> 作曲 : 李雙飛 作詞 : 施人誠(chéng) 我好久沒來(lái)這間餐廳 沒想到已經(jīng)換了裝潢 角落那窗口聞的到玫瑰花香 被你一說(shuō)是有些印象 我沒有說(shuō)謊我何必說(shuō)謊 你知道的我缺點(diǎn)之一就是很健忘 我哪有說(shuō)謊 是很感謝今晚的相伴 但我竟然有些不習(xí)慣 我知道從一開始隨隨便便深深淺淺 不過(guò)是愛的自由不計(jì)前嫌不知疲倦 永遠(yuǎn)太遠(yuǎn)走遠(yuǎn)遙遠(yuǎn) 放開不再拖欠oh 陪伴三個(gè)季節(jié)還是承受決裂 曾經(jīng)是心心念念 隨隨便便深深淺淺 愛上了不語(yǔ)不言不計(jì)前嫌不知疲倦 向后向前遇見改變 那殘破疲倦 永遠(yuǎn)太遠(yuǎn)走遠(yuǎn)遙遠(yuǎn) 放開不再拖欠 </p> </div> <div class="test" id="test3"> <h1>第二頁(yè)</h1> <p> 作曲 : 花粥 作詞 : 姬霄 編曲/混音:馬雨陽(yáng) 劫過(guò)九重城 夙愿只隔一箭 黃昏下模糊的側(cè)臉 遺忘了傷痛的少年 </p> </div> <div class="test" id="test4"> <h1>第三頁(yè)</h1> <p> 作曲 : 簡(jiǎn)弘亦 作詞 : 海雷 編曲:丁培峰 不愿染是與非 怎料事與愿違 心中的花枯萎 時(shí)光它去不回 但愿洗去浮華 撣去一身塵灰 再與你一壺清酒 話一世沉醉 不愿染是與非 怎料事與愿違 心中的花枯萎 時(shí)光它去不回 一場(chǎng)回憶 生生滅滅 了了心扉 再回首淺嘗心酒余味 一場(chǎng)回憶 生生滅滅 了了心扉 再回首淺嘗心酒余味 作曲 : 脫景麟 作詞 : 宜寶 編曲:馮聰 錄音:馮聰/劉天鴻 混音:劉天鴻 母帶 : 劉天鴻 秋天里的落葉揮手同樹道別 </p> </div> <div style="margin-bottom: 500px;" class="test" id="test5"> <h1>第四頁(yè)</h1> <p> 作曲 : 劉偉鋒 作詞 : 劉偉鋒 編曲:劉偉鋒 錄制混縮:巨人先生 出品:西亞斯音頻工作室 企劃:譚夢(mèng) 發(fā)行公司:恬音文化 說(shuō)好帶你流 最后一句感謝還有多余的抱歉 奔跑在街上大雨淋濕的視線 反反復(fù)復(fù)的自我欺騙 再分開在之前 沒有勇氣想的更遠(yuǎn) 黃昏下模糊的側(cè)臉 遺忘了傷痛的少年 有風(fēng)險(xiǎn)才蛻變 時(shí)間總會(huì)說(shuō)出再見 曾經(jīng)是心心念念隨隨便便深深淺淺 愛上了不語(yǔ)不言不計(jì)前嫌不知疲倦 向后向前遇見改變 </p> </div> </div> </div> </body> </html>
$(document).ready(function () { window.addEventListener("scroll", function(event) { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; $(window).scroll(function () { var top = $(document).scrollTop(); //定義變量,獲取滾動(dòng)條的高度 //var menu = $("#menu"); //定義變量,抓取#menu var items = $("#content").find(".test"); //定義變量,查找.item var curId = ""; //定義變量,當(dāng)前所在的樓層item #id items.each(function () { var m = $(this); //定義變量,獲取當(dāng)前類 var mHeight = m.height(); var itemsTop = m.offset().top; //定義變量,獲取當(dāng)前類的top偏移量 if (top >= itemsTop - mHeight/2) { curId = "#" + m.attr("id"); if(curId == "#test5"){ var menu = $("#menu"); var curLink = menu.find(".sidenav"); curLink.removeClass("sidenav"); menu.find("[href='#test5']").addClass("sidenav"); }else{ //給相應(yīng)的樓層設(shè)置cur,取消其他樓層的cur var menu = $("#menu"); var curLink = menu.find(".sidenav"); if (curId && curLink.attr("href") != curId) { curLink.removeClass("sidenav"); menu.find("[href=" + curId + "]").addClass("sidenav"); } } } else { return false; } }); }); }); });
東IT優(yōu)就業(yè)
接下來(lái),廣州IT培訓(xùn)老師講一下,如何用HTML+CSS技術(shù),來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)滑動(dòng)門效果。
一、什么是滑動(dòng)門
大家在網(wǎng)頁(yè)中經(jīng)常會(huì)見到這樣一種導(dǎo)航效果,因?yàn)槭褂妙l率廣泛,所以廣大的程序員給它起了一個(gè)名字,叫做滑動(dòng)門。在學(xué)習(xí)滑動(dòng)門之前,首先你要了解什么是滑動(dòng)門。
小米官網(wǎng),網(wǎng)頁(yè)滑動(dòng)門效果
二、實(shí)現(xiàn)滑動(dòng)門所需技術(shù)
1.簡(jiǎn)單HTML基礎(chǔ)知識(shí)
2.簡(jiǎn)單的CSS基礎(chǔ)樣式
3.CSS定位
三、如何實(shí)現(xiàn)滑動(dòng)門
1.準(zhǔn)備好一段HTML代碼
2.給當(dāng)前HTML結(jié)構(gòu)添加一些樣式
3.使用定位實(shí)現(xiàn)滑動(dòng)門效果
根據(jù)廣州IT培訓(xùn)老師上面分享的步驟,就可以實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)門效果,快去試試吧。
廣東IT優(yōu)就業(yè)
出處:www.cnblogs.com/shsxt/p/8206115.html
更多IT精彩推薦:
月入過(guò)萬(wàn)的WEB工程師是如何煉成的?http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。