整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          css完成手機(jī)端導(dǎo)航左右滑動(dòng)

          機(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


          主站蜘蛛池模板: 国产拳头交一区二区| 在线免费观看一区二区三区| 免费一区二区三区| 亚洲色一区二区三区四区| 国产精品自在拍一区二区不卡| 国产一区二区草草影院| 精品一区二区三区自拍图片区| 日韩一区二区三区在线观看| 国产香蕉一区二区精品视频| 久久精品亚洲一区二区| 国模无码一区二区三区不卡| 国产一区在线视频观看| eeuss鲁片一区二区三区| 无码av免费毛片一区二区| 91在线看片一区国产| 久久免费区一区二区三波多野| 国产激情一区二区三区成人91| 精品一区二区三区视频在线观看| 精品国产一区二区三区AV| 无码播放一区二区三区| 日韩一区二区超清视频| 亚洲AV日韩综合一区尤物| 国产日韩一区二区三区| 亚洲AV无码一区二区三区在线 | 久久99国产精品一区二区| 一区二区三区免费在线观看| 国产高清一区二区三区四区| 亚洲男人的天堂一区二区| 国产一区三区三区| 久久亚洲国产精品一区二区| 人妻夜夜爽天天爽爽一区| 亚洲综合在线成人一区| 亚洲AV无码一区二区一二区| 精品国产一区二区三区AV| 无码精品人妻一区| 精品国产日产一区二区三区| 日韩好片一区二区在线看| 国产乱人伦精品一区二区在线观看| 国产精品成人一区二区三区| 国产精品区AV一区二区| 国产成人精品一区二区三区免费 |