當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动界面侧滑

發布時間：2025/4/5 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了移动界面侧滑小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

（1 ）

首頁

?	<!DOCTYPE html>
?	<html>
?	?
?	<head>
?	<meta charset="utf-8">
?	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
?	<title></title>
?	<base target="content" />
?	<script type="text/javascript" src="js/jquery.min.js"></script>
?	<link rel="shortcut icon" href="favicon.ico">
?	<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
?	<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
?	<style>
?	body{
?	margin: 0;
?	padding: 0;
?	overflow: hidden;
?	}
?	.page{
?	position: absolute;
?	/left: 300px;/
?	width: 100%;
?	height: 100%;
?	background-color: ;
?	}
?	.top{
?	position: fixed;
?	width: 100%;
?	height: 60px;
?	background-color: royalblue;
?	z-index: 500;
?	}
?	.mybtn{
?	margin-top: 15px;
?	margin-left: 15px;
?	color: #FFFFFF;
?	font-size: 28px;
?	}
?	.mybtn:hover{
?	cursor: pointer;
?	}
?	.backimg{
?	position: absolute;
?	width: 100%;
?	height: 100%;
?	z-index: 1000;
?	background-color: black;
?	opacity: 0.3;
?	display: none;
?	}
?	.right-dh{
?	border: 1px solid #000000;
?	position: absolute;
?	left: -300px;
?	background-color: black;
?	width: 300px;
?	height: 100%;
?	z-index: -10;
?	}
?	.right-dh-tx{
?	text-align: center;
?	}
?	.right-dh-tx img{
?	display: block;
?	width: 110px;
?	border-radius: 50%;
?	border: 3px solid #FFFFFF;
?	margin: 100px auto 30px;
?	}
?	.right-dh-tx span{
?	color: #FFFFFF;
?	}
?	.cont iframe{
?	position: absolute;
?	top: 65px;
?	width: 100%;
?	height: 100%;
?	border: 0px;
?	/background-color: brown;/
?	}
?	.dh-btn{
?	margin-top: 50px;
?	/border-top: 1px solid gray;/
?	}
?	.dh-btn a{
?	display: block;
?	color: #FFFFFF;
?	text-decoration: none;
?	/border-bottom: 1px solid gray;/
?	height: 60px;
?	line-height: 60px;
?	text-indent: 20px;
?	}
?	hr{
?	width: 200px;
?	color: gainsboro;
?	opacity: 0.3;
?	margin-top: 50px;
?	}
?	</style>
?	?
?	<script>
?	?
?	$(document).ready(function(){
?	?
?	//側滑按鈕點擊事件
?	$(".mybtn").click(function(){
?	?
?	//頁面整體側滑
?	$(".page").animate({
?	left:'300px'
?	});
?	?
?	//顯示透明度div層
?	$(".backimg").css({
?	"display":"block"
?	});
?	?
?	//左側導航右滑
?	$(".right-dh").animate({
?	left:'0px'
?	});
?	?
?	});
?	?
?	?
?	//還原點擊事件
?	$(".backimg").click(function(){
?	//頁面整體左滑動
?	$(".page").animate({
?	left:'0px'
?	});
?	?
?	//顯示透明度div層隱藏
?	$(".backimg").css({
?	"display":"none"
?	});
?	?
?	//左側導航右滑
?	$(".right-dh").animate({
?	left:'-300px'
?	});
?	});
?	?
?	//欄目選擇事件
?	$(".dh-btn a").click(function(){
?	?
?	//頁面整體左滑動
?	$(".page").animate({
?	left:'0px'
?	});
?	?
?	//顯示透明度div層隱藏
?	$(".backimg").css({
?	"display":"none"
?	});
?	?
?	//左側導航右滑
?	$(".right-dh").animate({
?	left:'-300px'
?	});
?	?
?	});
?	?
?	?
?	});
?	?
?	</script>
?	?
?	</head>
?	?
?	<body>
?	?
?	<!--右側導航-->
?	<div class="right-dh">
?	?
?	<!--右側導航頭像-->
?	<div class="right-dh-tx">
?	<img src="img/3968e918ff16dd211aa379ec51f1274e_Img278726766.jpg">
?	<span>播求</span>
?	</div>
?	?
?	<hr />
?	?
?	<!--導航欄-->
?	<div class="dh-btn">
?	<a class="dj" href="grzl.html">
?	<i class="fa fa-bars"></i>  個人資料
?	</a>
?	<a href="zpzs.html">
?	<i class="fa fa-bank"></i>  比賽視頻
?	</a>
?	<a href="ysxz.html">
?	<i class="fa fa-beer"></i>  藝術寫真
?	</a>
?	<a href="yyjl.html">
?	<i class="fa fa-bold"></i>  參演電影
?	</a>
?	<a href="ryjl.html">
?	<i class="fa fa-bold"></i>  榮譽經歷
?	</a>
?	?
?	?
?	</div>
?	?
?	</div>
?	<!--左側界面-->
?	<div class="page">
?	?
?	?
?	<div class="backimg"></div>
?	?
?	<div class="top">
?	<!--向右滑動按鈕-->
?	<i class="mybtn fa fa-user"></i>
?	</div>
?	?
?	<!--主要內容-->
?	<div class="cont">
?	<iframe name="content" src="shouye.html"></iframe>
?	</div>
?	?
?	</div>
?	?
?	</body>
?	?
?	</html>

以上的是主干部分，下面的是各欄目代碼

各欄目該怎么寫怎么寫。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的移动界面侧滑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

界面

上一篇：承重能力强的智能安全工具柜求推荐？谢谢了
下一篇：表单验证之用户注册