首页 > 代码库 > 自己写的一个左右自适应伸缩插件
自己写的一个左右自适应伸缩插件
简单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="http://www.mamicode.com/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="http://www.mamicode.com/animate.css"><script src="http://www.mamicode.com/jquery-1.8.0.min.js"></script><script src="http://www.mamicode.com/animate.js"></script><body><div id="animate" style="width:100%;height:670px;"></div></body></html><script type="text/javascript">$(function () { $("#animate").bindanimate();});</script>
展示效果
自己写的一个左右自适应伸缩插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。