侧面板滑块插件jquery-panelslider

所属分类：导航-其他导航

58925 416 查看评论 (15)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：jquery滑动面板，jQuery插件

特点

幻灯片页面和面板在一起

支持多个面板在同一页

支持关闭当点击外板或按Esc键。

安装

包括jQuery和jquery.panelslider.min.js脚本：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>

使用

创建面板内容的元素，它的链接。

<div id="my-panel">
  <p>Hello, world</p>
</div>
<a id="my-link" href="#my-panel">Open panel</a>

然后调用panelslider()的元素。

$('#my-panel').panelslider();

你也可以这样调用panelslider()

$.panelslider($('#my-panel'));

关闭

该小组将关闭时按下ESC或任何部分的网页外面板点击（如果options.clickclose为true）。

$.panelslider.close(callback);

选项

这是支持的选项，其默认值：

defaults = {
  side: 'left',      //面板的一面：左或右
  duration: 200,     //过渡时间
  clickClose: true   //如果true关闭面板点击外面
}

图像擦除插件jQuery.eraser

jquer滚动隐藏显示顶部导航栏

jQuery仿百度首页滑动选项卡代码

首页滑动选项卡

其他导航

43725 409

H5响应式菜单导航

H5页面自适应，响应式菜单导航

其他导航

51907 317

圆形的动画导航用CSS和jQuery

一个实验性的全屏导航、动画使用CSS和jQuery,扩大在一个循环。支持所有主流浏览器。

其他导航

37318 399

jQuery顶部导航固定

jQuery向下滚动页面顶部导航固定特效，多种展示效果。

其他导航

37916 437

讨论这个项目（15）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

DELICIOUS 0

2019/12/19 15:28:05

areyouOk1

2019/12/19 16:14:19

先用js格式货工具，格式下代码
https://www.jq22.com/jsgsh
然后注释25行，33行，72行，73行，76行，77行就行了，代码如下

switch (r.side) {
    case "left":
        e.css({
            left: "-" + i + "px",
            right: "auto"
        });
        //s["margin-left"] = "+=" + i;
        o.left = "+=" + i;
        break;
    case "right":
        e.css({
            left: "auto",
            right: "-" + i + "px"
        });
        //s["margin-left"] = "-=" + i;
        o.right = "+=" + i;
        break
}

switch (i.data("side")) {
    case "left":
        // u["margin-left"] = "-=" + o;
        // a.left = "-=" + o;
        break;
    case "right":
        // u["margin-left"] = "+=" + o;
        // a.right = "-=" + o;
        break
}