如何实现侧滑功能
“`
<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: lavender;
}
.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'
});
//显示透明度p层
$(".backimg").css({
"display":"block"
});
//左侧导航右滑
$(".right-dh").animate({
left:'0px'
});
});
//还原点击事件
$(".backimg").click(function(){
//页面整体左滑动
$(".page").animate({
left:'0px'
});
//显示透明度p层隐藏
$(".backimg").css({
"display":"none"
});
//左侧导航右滑
$(".right-dh").animate({
left:'-300px'
});
});
//栏目选择事件
$(".dh-btn a").click(function(){
//页面整体左滑动
$(".page").animate({
left:'0px'
});
//显示透明度p层隐藏
$(".backimg").css({
"display":"none"
});
//左侧导航右滑
$(".right-dh").animate({
left:'-300px'
});
});
});
</script>
</head>
<body>
<!--右侧导航-->
<p class="right-dh">
<!--右侧导航头像-->
<p class="right-dh-tx">
<img src="img/tx.jpg" />
<span>刘德华</span>
</p>
<hr />
<!--导航栏-->
<p 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>
</p>
</p>
<!--左侧界面-->
<p class="page">
<p class="backimg"></p>
<p class="top">
<!--向右滑动按钮-->
<i class="mybtn fa fa-user"></i>
</p>
<!--主要内容-->
<p class="cont">
<iframe name="content" src="shouye.html"></iframe>
</p>
</p>
</body>以上是如何实现侧滑功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
vivox100s和x100区别：性能对比及功能解析
Mar 23, 2024 pm 10:27 PM
vivox100s和x100手机都是vivo手机产品线中的代表机型，它们分别代表了vivo在不同时间段内的高端技术水平，因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较，帮助消费者更好地选择适合自己的手机。首先，我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的
华为手机如何实现双微信登录？
Mar 24, 2024 am 11:27 AM
华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同
自媒体到底是什么？它的主要特点和功能有哪些？
Mar 21, 2024 pm 08:21 PM
随着互联网的快速发展，自媒体这个概念已经深入人心。那么，自媒体到底是什么？它有哪些主要特点和功能呢？接下来，我们将一一探讨这些问题。一、自媒体到底是什么？自媒体，顾名思义，就是自己就是媒体。它是指通过互联网平台，个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体，如报纸、电视、电台等，自媒体具有更强的互动性和个性化，让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些？1.低门槛：自媒体的崛起降低了进入媒体行业的门槛，不再需要繁琐的设备和专业的团队，一部手
PHP编程指南：实现斐波那契数列的方法
Mar 20, 2024 pm 04:54 PM
编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元
小红书账号管理软件有哪些功能？怎么经营小红书账号？
Mar 21, 2024 pm 04:16 PM
随着小红书在年轻人中的流行，越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中，我们将讨论一些小红书账号管理软件的功能，并探讨如何更好地经营小红书账号。随着社交媒体的发展，许多人发现自己需要管理多个社交账号。对于小红书用户来说，这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号，包括自动发布内容、定时发布、数据分析等功能。通过这些工具，用户可以更高效地管理他们的账号，提高账号的曝光率和关注度。另一、小红书账号管理软件有
PHP技巧：快速实现返回上一页功能
Mar 09, 2024 am 08:21 AM
PHP技巧：快速实现返回上一页功能在网页开发中，经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验，让用户更加方便地在网页之间进行导航。在PHP中，我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能，并提供具体的PHP代码示例。在PHP中，我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL
如何在华为手机上实现微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App
掌握Golang如何实现游戏开发的可能性
Mar 16, 2024 pm 12:57 PM
在当今的软件开发领域中，Golang（Go语言）作为一种高效、简洁、并发性强的编程语言，越来越受到开发者的青睐。其丰富的标准库和高效的并发特性使它成为游戏开发领域的一个备受关注的选择。本文将探讨如何利用Golang来实现游戏开发，并通过具体的代码示例来展示其强大的可能性。1.Golang在游戏开发中的优势作为一种静态类型语言，Golang在构建大型游戏系统
