移动页面侧滑的演示
来源:互联网 发布:蜂巢网络与无人机 编辑:程序博客网 时间:2024/06/01 08:59
<!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' }); }); //还原点击事件 $(".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
- 移动页面侧滑的演示
- 移动页面侧滑
- 移动页面之侧滑
- 基于Processing的人物移动演示:两点间匀速移动
- 超链接引起的页面移动
- 移动端页面的相对高度
- 简单的移动端页面
- VML演示页面
- my97 演示页面
- my97 演示页面
- scrapy关于登录和更多页面的演示
- 基于Processing的人物八方向移动演示:X,Y,XY同时到达移动
- 基于Processing的人物八方向移动(加入图片)演示:X,Y,XY同时到达移动
- 【初探移动前端开发02】移动设备的页面
- JS跟随页面移动的div
- 移动web页面使用字体的思考
- 自适应移动设备页面的设计
- 如何进行移动端的页面开发?
- Js 过滤特殊字符
- 牛客网 剑指offer-反转列表
- web——百度首页
- 仿百度首页
- 数据挖掘SSAS(Sql server analysis service)
- 移动页面侧滑的演示
- python爬虫由浅入深3--BeautifulSoup的使用的基本方法
- 移动
- rope总结
- [JAVA] 简述Hibernate HQL 01
- 鼠标移动,按下,松开记录坐标和偏移量事件
- dirprm/repfull.prm does not exist for REPFULL
- 媒体查询~~~~根据网页窗口大小改变颜色
- angularjs初始化时,同一方法调用了2次