码迷,mamicode.com
首页 > 其他好文 > 详细

自己写的一个左右自适应伸缩插件

时间:2015-02-02 19:36:40      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

简单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"  /></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>

  

 展示效果

技术分享

自己写的一个左右自适应伸缩插件

标签:

原文地址:http://www.cnblogs.com/f23wangj/p/4268326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!