移动界面侧滑


<!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>&nbsp;&nbsp;个人资料</a><a href="zpzs.html"><i class="fa fa-bank"></i>&nbsp;&nbsp;作品展示</a><a href="ysxz.html"><i class="fa fa-beer"></i>&nbsp;&nbsp;艺术写真</a><a href="yyjl.html"><i class="fa fa-bold"></i>&nbsp;&nbsp;演绎经历</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>

html/css移动界面侧滑效果相关推荐

iOS 下如果存在UIScrollerView 使用UIScreenEdgePanGestureRecognizer实现侧滑效果失效的问题...
当你在使用UIScreenEdgePanGestureRecognizer手势实现侧滑的时候,如果后期你导航控制器push出的界面中包含UIScrollerView,这个时候你会发现,侧滑效果无法实现 ...
红橙Darren视频笔记仿QQ侧滑效果
这一篇没有什么新的内容就是改写红橙Darren视频笔记仿酷狗侧滑效果的侧滑的效果 1.去掉淡入淡出效果 2.加上黑色模板效果效果: 去掉淡入淡出效果很简单就是注释掉onScrollChan ...
红橙Darren视频笔记仿酷狗侧滑效果
效果需求 1.思路利用ScrollView包裹两个布局+scroll实现侧滑效果 2.新建menu和主体的xml布局文件自定义属性并获取 4.在onFinishInflate修改布局宽度思考o ...
打造华丽QQ5.0侧滑效果
已经好久没写过Android开发的技术博客,只因最近项目比较急.耽误了.今天带来的QQ5.0侧滑效果.我们都对QQ5.0侧滑效果很熟悉了,就不多做介绍,就一个字"炫".正好这次在项 ...
Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
Web前端——登录界面hover效果
登录界面hover效果 Demo1(来源:B站"艾恩小灰灰") 源代码: html+javascript: css: 效果图: Demo1(来源:B站"艾恩小灰灰&quo ...
防人人网客户端侧滑效果，简单实现Android滑动菜单特效
人人网客户端,有一个侧滑效果不错,就是菜单(menu)和内容(content)可以实现侧滑. 首先,我们先来看一下最终的效果图,有图有真相,这样讲解起来,会更加的清楚. 程序运行时,我们刚开始看到的是 ...
仿京东购物界面放大镜效果
背景知识:元素偏移量 offset offset 翻译为偏移量 ,使用 offset 的相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽 ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...

html/css移动界面侧滑效果

移动界面侧滑

html/css移动界面侧滑效果相关推荐

最新文章

热门文章