gongzhonghao.png
扫码关注我们
最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

js实现带模糊效果的隐藏滑动侧边栏代码

来源:http://www.erdangjiade.com/js/8568.html 沐浴春风 2018-09-03 15:07浏览(527)

以前用原生态的JS实现过这个效果,最近发现了的一个Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。希望你可以喜欢。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

js实现带模糊效果的隐藏滑动侧边栏代码
分类:导航菜单 > 展开收缩 难易:入门级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 20 积分
1.引入文件

在页面中引入pushbar.js和pushbar.css文件。

<link href="dist/css/pushbar.css" rel="stylesheet">
<script src="js/pushbar.js"></script>  

2.HTML结构

将要滑出的侧边栏部分.pushbar和主体部分.pushbar_main_content分开。

<div data-pushbar-id="mypushbar1" class="pushbar from_left">
      Push bar content 1

  <button data-pushbar-close>Close</button>
</div>

<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
  Push bar content 2

  <button data-pushbar-close>Close</button>
</div>

<div class="pushbar_main_content">
  Main content of the page

  <button data-pushbar-target="mypushbar1">
  Open my pushbar 1
  </button>

  <button data-pushbar-target="mypushbar2">
  Open my pushbar 2
  </button>
</div> 

Pushbar.js提供四个方向的滑出效果,左侧(from_left)、右侧(from_right)、头部(from_top)、底部(from_bottom),只需修改侧边栏部分class="pushbar from_left"的样式就可。
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。

var pushbar = new Pushbar({
    blur:true,
    overlay:true,
});

配置参数

Pushbar.js提供两个主要的选项配置,简单实用。

blur:是否在打开侧边栏时主页面带模糊效果。

overlay:是否在打开侧边栏时主页面带遮罩层。
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/8568.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    02-15 14:53
    1531455520@qq.com
    Nice,its so ok <br />js
  • 头像 椅子
    09-09 14:22
    Cheating_cat.
    我就想说一句,一楼说的是啥(O_o)??
  • 头像 沙发
    09-04 09:22
    tian0922
    让我们将事前的忧虑,换为事前的思考和计划吧!
1 2