源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1415|回复: 0

[CSS/Html] 前端特效:导航 、个人中心滑出(左滑、右滑、上滑、下滑)效果实现

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19326
发表于 2023-6-16 14:19:37 | 显示全部楼层 |阅读模式

前段时间做到微信开发,需要实现个人中心滑出效果,今天稍有空闲,记录一下实现方式。

先来个效果图:



直接列出实现代码:

1.html
  1. <div class="left_slide_center_nav">
  2.     <!--蒙层-->
  3.     <div class="center_mask"></div>
  4.     <div class="center_content">
  5.         <!-- 内容 -->
  6.     </div>
  7. </div>
复制代码

2.css
  1. /**蒙层*/
  2. .left_slide_center_nav .center_mask {
  3.     position: fixed;
  4.     top: 0;
  5.     left: 0;
  6.     right: 0;
  7.     bottom: 0;
  8.     background: rgba(0,0,0,.6);
  9.     z-index: 1000;
  10.     display: none;
  11. }

  12. /**内容*/
  13. .left_slide_center_nav .center_content {
  14.     position: fixed;
  15.     width: 79%;
  16.     top: 0;
  17.     bottom: 0;
  18.     transition: all .4s;
  19.     -moz-transition: all .4s;
  20.     -webkit-transition: all .4s;
  21.     -o-transition: all .4s;
  22.     -os-transition: all .4s;
  23.     z-index: 99999;
  24.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  25.     overflow-y: scroll;
  26.     background: #fff;
  27.     -os-transform: translateX(-120%);
  28.     transform: translateX(-120%);
  29. }

  30. /**显示蒙层和内容 使用父级.show样式控制*/
  31. .left_slide_center_nav.show .center_mask {
  32.     display: block;
  33. }
  34. .left_slide_center_nav.show .center_content {
  35.     -os-transform: translateX(0);
  36.     transform: translateX(0);
  37. }
复制代码

3.js控制样式切换,显示和隐藏
  1. //显示:
  2. $(".left_slide_center_nav").addClass("show");


  3. //点击蒙层关闭:
  4. $(".left_slide_center_nav").on("click",".center_mask",function(){
  5.     //隐藏:
  6.     $(".left_slide_center_nav").removeClass("show");
  7. });
复制代码

注意重点:

1.初始样式中transform: translateX(-120%);的定义,以及show之后transform: translateX(0);的定义

2.父级别.show样式的控制



注:

如果需要右往左滑出,css中的代码 transform: translateX(-120%) 可改为 transform: translateX(120%);参数值可自行修改。

如果需要上往下,或者下往上滑出,可以使用transform: translateY(-120%);  或者transform: translateY(120%);

如果需要实现斜着滑,可以transform: translate(150%,150%);

其他的就各位举一反三吧。
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 08:52 , Processed in 0.031040 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明