jquery左右自适应伸缩插件

最新推荐文章于 2022-02-21 13:37:34 发布

weixin_30808693

最新推荐文章于 2022-02-21 13:37:34 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/f23wangj/p/4268326.html

本文介绍了一种结合CSS和jQuery实现的网页布局方案及动画效果。通过简单的CSS样式设置和自定义jQuery函数，实现了侧边栏的隐藏与显示功能，并配以平滑的动画过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单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({ width: "0px" });
                    $("#pannal_right").animate({ marginLeft: "0px" });
                    obj.find("span").animate({ left: "0px" });
                }, function () {
                    $("#pannal_left").animate({ width: "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="width:100%;height:670px;">
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
	$("#animate").bindanimate();
});
</script>

展示效果