html/css移动界面侧滑效果
来源:互联网 发布:优化人才管理是什么 编辑:程序博客网 时间:2024/06/01 07:13
移动界面侧滑
<!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: 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' }); //显示透明度div层 $(".backimg").css({ "display":"block" }); //左侧导航右滑 $(".right-dh").animate({ left:'0px' }); }); http://127.0.0.1:8020/linH/img/untitled.png //还原点击事件 $(".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/tx.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> </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>
阅读全文
0 0
- html/css移动界面侧滑效果
- 移动界面侧滑
- 移动界面侧滑
- 边框效果html+css
- 手机移动界面侧滑
- html+css实现登录界面
- 移动端的html+css
- QQ效果,侧滑界面
- HTML CSS 遮罩效果!
- css实现html透明效果
- HTML CSS 圆角 阴影效果
- html+css实现百叶效果
- 3D效果-HTML+CSS
- HTML CSS 鼠标样式效果
- HTML+CSS实现动画效果
- jquery登录界面边框移动效果
- UGUI实现界面随鼠标移动效果
- PHP+HTML实现登出界面倒计时效果
- 133. Clone Graph
- 数组的最大子序列之和
- 解决org.apache.rat:apache-rat-plugin:0.8:check (default) on project hbase: Too many unapproved license
- FutureTask使用demo
- 51nod 1007 正整数分组 背包思路题
- html/css移动界面侧滑效果
- 简单的滚动条事件
- B. Polycarp and Letters
- index
- webpack 零基础配置
- jar包调用dll、lib等外部库文件解决办法
- 51NOD-1414 冰雕
- MySQL
- SpringBoot入门:(1)创建一个应用