jQuery滑动展开侧边固定面板滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动展开侧边固定面板滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery滑动展开侧边固定面板代码</title>

<style type="text/css">
body{font-family:Arial;background:#eee;}
h1, h2{margin-top:0;}
p{color:#ccc;line-height:1.5;}
#page{width:940px;height:400px;padding:20px;margin:0 auto;background:white;}
.panel{display:none;width:220px;padding:20px;background-color:#333;color:#fff;box-shadow:inset 0 0 5px 5px #222;}
</style>
</head>
<body>

<div id="page">
	<h1>板滑块的例子</h1>
	<a id="left-panel-link" href="#left-panel">打开左面板</a> |
	<a id="right-panel-link" href="#right-panel">打开右面板</a>
	<hr />
</div>

<!-- Left panel -->
<div id="left-panel" class="panel">
	<h2>左侧面板</h2>
	<p>点击任何外部面板关闭它。</p>
</div>

<!-- Right panel -->
<div id="right-panel" class="panel">
	<h2>右侧面板</h2>
	<p>单击该面板不会关闭它,因为外面 <code>clickClose = false</code></p>
	<button id="close-panel-bt">关闭</button>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.panelslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$('#left-panel-link').panelslider();

	$('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 200 });
	
	$('#close-panel-bt').click(function() {
		$.panelslider.close();
	});
	
});
</script>
</body>
</html>

JS代码(jquery.panelslider.min.js):

(function(e){
	"use strict";
	function r(e,r){
	var i=e.outerWidth(true),s={
}
,o={
}
;
	if(e.is(":visible")||n){
	return}
n=true;
	e.addClass("ps-active-panel").css({
	position:"fixed",top:0,height:"100%","z-index":999999}
);
	e.data(r);
	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}
t.animate(s,r.duration);
	e.show().animate(o,r.duration,function(){
	n=false}
)}
var t=e("body"),n=false;
	e.panelslider=function(t,n){
	var i=e(".ps-active-panel");
	var s={
	side:"left",duration:200,clickClose:true}
;
	n=e.extend({
}
,s,n);
	if(i.is(":visible")&&i[0]!=t[0]){
	e.panelslider.close(function(){
	r(t,n)}
)}
else if(!i.length||i.is(":hidden")){
	r(t,n)}
}
;
	e.panelslider.close=function(r){
	var i=e(".ps-active-panel"),s=i.data("duration"),o=i.outerWidth(true),u={
}
,a={
}
;
	if(!i.length||i.is(":hidden")||n){
	return}
n=true;
	switch(i.data("side")){
	case"left":u["margin-left"]="-="+o;
	a.left="-="+o;
	break;
	case"right":u["margin-left"]="+="+o;
	a.right="-="+o;
	break}
i.animate(a,s);
	t.animate(u,s,function(){
	i.hide();
	i.removeClass("ps-active-panel");
	n=false;
	if(r){
	r()}
}
)}
;
	e(document).bind("click keyup",function(t){
	var n=e(".ps-active-panel");
	if(t.type=="keyup"&&t.keyCode!=27){
	return}
if(n.is(":visible")&&n.data("clickClose")){
	e.panelslider.close()}
}
);
	e(document).on("click",".ps-active-panel",function(e){
	e.stopPropagation()}
);
	e.fn.panelslider=function(t){
	this.click(function(n){
	var r=e(".ps-active-panel"),i=e(this.getAttribute("href"));
	if(r.is(":visible")&&i[0]==r[0]){
	e.panelslider.close()}
else{
	e.panelslider(i,t)}
n.preventDefault();
	n.stopPropagation()}
);
	return this}
}
)(jQuery)

附件:下载该文件资源,减少时间成本(增值服务)