用jquery写的菜单从左往右滑动出现


Posted in Javascript onApril 11, 2014

最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑,

“什么是微网站?

微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站。微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android、iOS、WP等操作系统。开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5)、CSS、Javascript等,所以有普通网站开发经验的开发者,完全有能力开发微网站。

PS:初学者以后再看到什么以“微”开头的新名词,例如:微商城、微客服、微统计,直接把“微”字去掉或者把“微”当作是“基于微信的”就不难理解了。”, 

大部分都涉及html5的写法,这样就好理解了。。。还有就是参考了“微信生意宝”中的案例,里面的导航自己写了下demo,感觉还是很好理解的,下面上界面效果图

用jquery写的菜单从左往右滑动出现
因为是用jq所写,需要引用库文件,这边使用的是在线的cdn地址:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

然后编写html导航结构

<div class="quick"></div> <div class="slideLeftMenu"> 
<div class="quick-toolbar"> 
<p class="toolbar-title">QUICK MENU</p> 
<span class="toolbar-icon-delete"></span> 
</div> 
<div class="menuList"> 
<a class="list-item"> 
<p class="list-item-title">Home</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">About Us</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">Products</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">News</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">Contact Us</p> 
<span class="list-item-icon"></span> 
</a> 
</div> 
</div> 
<div class="masklayer"></div>

这部分没有什么技术性,纯粹就是div结构
<span style="white-space:pre"> </span>*{ margin:0; padding:0;} 
body{ 
font-size:1em; 
height:100%; 
margin:0; 
padding:0; 
}

/*这边是快捷按钮的样式,使用了css3属性写法,没考虑ie8-*/ 
.quick{ 
position:relative; 
left:0; 
top:0; 
width:100%; 
height:32px; 
background:-webkit-gradient(linear, left top, left bottom, from(#99f), to(#96f)); 
background:-webkit-linear-gradient(#99f, #96f); 
background: -moz-linear-gradient(#99f, #96f); 
background: -ms-linear-gradient(#99f, #9f); 
background: -o-linear-gradient(#99f, #96f); 
background: linear-gradient(#99f, #96f); 
}/*这边就是导航的css了,*/ 
<span style="white-space:pre"> </span>.slideLeftMenu{ 
display:none; 
width:272px; 
min-height:100%; 
background:#3d3d3d; 
position:absolute; 
right:0; 
top:0; 
z-index:3; 
} 
.slideLeftMenu .quick-toolbar, 
.slideLeftMenu .list-item{ 
display:block; 
width:100%; 
float:left; 
height:42px; 
line-height:42px; 
background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
background:-webkit-linear-gradient(#444, #222); 
background: -moz-linear-gradient(#444, #222); 
background: -ms-linear-gradient(#444, #222); 
background: -o-linear-gradient(#444, #222); 
background: linear-gradient(#444, #222); 
} 
.quick-toolbar .toolbar-title{ 
float:right; 
color:#fff; 
margin-right:10px; 
} 
.quick-toolbar .toolbar-icon-delete{ 
float:left; 
width:18px; 
height:18px; 
margin:11px 0 0 10px; 
background:url(images/icons-18-white.png) -73px -1px #212121; 
border-radius:9px; 
} 
.menuList .list-item-title{ 
float:left; 
font:blod 1.125em Arial, Helvetica, sans-serif; 
color:#fff; 
text-indent:0.75em; 
text-align:left; 
border:solid 0px red; 
} 
.menuList .list-item-icon{ 
float:right; 
width:18px; 
height:18px; 
margin:11px 10px 0 0; 
background:url(images/icons-18-white.png) -108px -1px #212121; 
border-radius:9px; 
}/*遮罩的css部分,这些绝大部分都是使用绝对定位实现的,因为我们要让导航从右侧平滑的飞入*/ 
.masklayer{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
background:#000; 
opacity:0.6; 
z-index:2; 
}

把css都写好了,也就完成一大半了,剩下就是使用jq处理动画部分,如下代码
window.QuickPanel = { //定义全局函数 
'isOpened': false, 
'opened': function(){ //定义面板打开的方法,打开的同时如果点击了背景层和快捷按钮层,执行关闭面板 
$masklayer.fadeIn().on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$quickpanel_toolbar.on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$panel.css({ //从右边飞入,使用绝对定位来操作 
"width":"272px", 
"top":"-6px", 
"right":"-272px" 
}).show().animate({"right":"0"},function(){ 
window.QuickPanel.isOpened = true; 
}); 
}, 
'closed': function(){ //定义关闭面板方法 
$panel.css({"right":"0"}).show().animate({ 
"right":"-272px" 
},function(){ 
$masklayer.fadeOut(); //这边才淡出的遮罩,我点击快的时候就会出问题。。。 
window.QuickPanel.isOpened = false; 
$panel.hide(); //等动画结束了吧菜单隐藏,不至于有滚动条 
}); 
} 
};

这部分是最重要的,我封装了个quickpanel的函数,里面有open和closed俩方法,,供我们其他dom元素点击调用会比较方便,最终实现就是图上的下效果,

ps:这边有个问题,在滑动过程会出现滚动条,这样其实是非常不美观的,请问大牛们有办法解决吗??我把附件放资源那边了,麻烦下载运行看看,如果有什么地方不对劲请留言提出来哦~~非常感谢

Javascript 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
瀑布流布局代码一例
Apr 11 #Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
javascript判断office版本示例
Apr 11 #Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 #Javascript
jquery解析xml字符串简单示例
Apr 11 #Javascript
代码获取历史上的今天发生的事
Apr 11 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
html读出文本文件内容
2007/01/22 Javascript
奇妙的js
2007/09/24 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
校长新学期寄语2016
2015/12/04 职场文书