jquery左右自适应伸缩插件

简单css布局

body {
    margin: 0 auto;
    padding: 0 auto;
}
.showpannal {
    position:absolute;
    left: 200px;
    top:300px;
}
.pannal_left {
    width: 200px;
    height: 670px;
    background-color: #6CF;
    float: left;
}
.pannal_right {
    height: 670px;
    margin-left: 200px;
    background-color: #CFF
}

jquery自定义函数

shrink = function () {
        var show = '<div id="pannal_left" class="pannal_left"></div><div id="pannal_right" class="pannal_right"></div><span id="animate" style="z-index:999;cursor:pointer;"><img src="leftbar.png" width="15" height="53"  alt=""/></span> </div>';
        return ep = {
            init: function (obj) {
                ep.create(obj);
                ep.bindEvent(obj);
            },
            create: function (obj) {
                obj.append(show);
				obj.find("span").addClass("showpannal");
            },
            bindEvent: function (obj) {
                obj.toggle(function () {
                    $("#pannal_left").animate({  "0px" });
                    $("#pannal_right").animate({ marginLeft: "0px" });
                    obj.find("span").animate({ left: "0px" });
                }, function () {
                    $("#pannal_left").animate({  "200px" });
                    $("#pannal_right").animate({ marginLeft: "200px" });
                    obj.find("span").animate({ left: "200px" });
                });
            }
        };
    }
	

    $.fn.bindanimate = function () {
		var me=new shrink();
        return this.each(function () {
            me.init($(this));
        });
    }

调用事例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-1.8.0.min.js"></script>
<script src="animate.js"></script>
<body>
<div id="animate" style="100%;height:670px;">
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
	$("#animate").bindanimate();
});
</script>

展示效果