华为手机屏幕侧滑功能

发布网友发布时间：2022-04-27 04:11

共2个回答

懂视网时间：2022-05-15 19:43

“`

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

热心网友时间：2022-05-15 16:51

在手机上面选择设置。

请点击输入图片描述

打开设置然后选择系统和更新。

请点击输入图片描述

然后选择打开系统导航方式。

请点击输入图片描述

选择手势导航，点击进入更多设置。

请点击输入图片描述

往左边滑动操作演示界面。

请点击输入图片描述

然后按照触发应用侧滑功能演示，应用支持这个功能就可以使用。

请点击输入图片描述