整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
機端左右滑動導航，html正常寫，css超出不換行，隱藏滾動條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內容滑動與導航時時對應</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">首頁</a></li>
<li><a href="#test2" class="sidenav-first test2">第一頁</a></li>
<li><a href="#test3" class="sidenav-first test3">第二頁</a></li>
<li><a href="#test4" class="sidenav-first test4">第三頁</a></li>
<li><a href="#test5" id="test-last" class="sidenav-first test5">第四頁</a></li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div id="content">
<div class="test" id="test1">
<h1>首頁</h1>
<p>
作曲 : 家家
作詞 : 家家
編曲：家家
還有什么等待還有什么悲哀
這故事中的人不太精彩
夏去了又回來而人卻已不在
它重復著我洶涌的忍耐
今年蘭花又開開了它也會敗
我想
把心慢慢的釋懷
我知道從一開始隨隨便便深深淺淺
不過是愛的自由不計前嫌不知疲倦
永遠太遠走遠遙遠
不過是愛的自由不計前嫌不知疲倦
永遠太遠走遠遙遠
放開不再拖欠
</p>
</div>
<div class="test" id="test2">
<h1>第一頁</h1>
<p>
作曲 : 李雙飛
作詞 : 施人誠
我好久沒來這間餐廳
沒想到已經換了裝潢
角落那窗口聞的到玫瑰花香
被你一說是有些印象
我沒有說謊我何必說謊
你知道的我缺點之一就是很健忘
我哪有說謊
是很感謝今晚的相伴
但我竟然有些不習慣
我知道從一開始隨隨便便深深淺淺
不過是愛的自由不計前嫌不知疲倦
永遠太遠走遠遙遠
放開不再拖欠oh
陪伴三個季節還是承受決裂
曾經是心心念念
隨隨便便深深淺淺
愛上了不語不言不計前嫌不知疲倦
向后向前遇見改變
那殘破疲倦
永遠太遠走遠遙遠
放開不再拖欠
</p>
</div>
<div class="test" id="test3">
<h1>第二頁</h1>
<p>
作曲 : 花粥
作詞 : 姬霄
編曲/混音：馬雨陽
劫過九重城
夙愿只隔一箭
黃昏下模糊的側臉
遺忘了傷痛的少年
</p>
</div>
<div class="test" id="test4">
<h1>第三頁</h1>
<p>
作曲 : 簡弘亦
作詞 : 海雷
編曲：丁培峰
不愿染是與非 怎料事與愿違
心中的花枯萎 時光它去不回
但愿洗去浮華 撣去一身塵灰
再與你一壺清酒 話一世沉醉
不愿染是與非 怎料事與愿違
心中的花枯萎 時光它去不回
一場回憶 生生滅滅 了了心扉
再回首淺嘗心酒余味
一場回憶 生生滅滅 了了心扉
再回首淺嘗心酒余味
作曲 : 脫景麟
作詞 : 宜寶
編曲：馮聰
錄音：馮聰/劉天鴻
混音：劉天鴻
母帶 : 劉天鴻
秋天里的落葉揮手同樹道別
</p>
</div>
<div style="margin-bottom: 500px;" class="test" id="test5">
<h1>第四頁</h1>
<p>
作曲 : 劉偉鋒
作詞 : 劉偉鋒
編曲：劉偉鋒
錄制混縮：巨人先生
出品：西亞斯音頻工作室
企劃：譚夢
發行公司：恬音文化
說好帶你流
最后一句感謝還有多余的抱歉
奔跑在街上大雨淋濕的視線
反反復復的自我欺騙
再分開在之前
沒有勇氣想的更遠
黃昏下模糊的側臉
遺忘了傷痛的少年
有風險才蛻變
時間總會說出再見
曾經是心心念念隨隨便便深深淺淺
愛上了不語不言不計前嫌不知疲倦
向后向前遇見改變
</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(); //定義變量，獲取滾動條的高度
//var menu = $("#menu"); //定義變量，抓取#menu
var items = $("#content").find(".test"); //定義變量，查找.item
var curId = ""; //定義變量，當前所在的樓層item #id
items.each(function () {
var m = $(this); //定義變量，獲取當前類
var mHeight = m.height();
var itemsTop = m.offset().top; //定義變量，獲取當前類的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{
//給相應的樓層設置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優就業
接下來，廣州IT培訓老師講一下，如何用HTML+CSS技術，來實現網頁滑動門效果。
一、什么是滑動門
大家在網頁中經常會見到這樣一種導航效果,因為使用頻率廣泛，所以廣大的程序員給它起了一個名字，叫做滑動門。在學習滑動門之前，首先你要了解什么是滑動門。
小米官網，網頁滑動門效果
二、實現滑動門所需技術
1.簡單HTML基礎知識
2.簡單的CSS基礎樣式
3.CSS定位
三、如何實現滑動門
1.準備好一段HTML代碼
2.給當前HTML結構添加一些樣式
3.使用定位實現滑動門效果
根據廣州IT培訓老師上面分享的步驟，就可以實現簡單的滑動門效果，快去試試吧。
廣東IT優就業
出處：www.cnblogs.com/shsxt/p/8206115.html
更多IT精彩推薦：
月入過萬的WEB工程師是如何煉成的?http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
