标签：
就是一个停留在页面右侧的滑动菜单，点击可以拉出，带回调函数。宽高位置可以参数指定。插件代码如下：
（jquery的路径请自己修改）
(function($){ $.fn.sideSwitch = function(opts){ var defaults = { contentWidth:‘400px‘, contentHeight:‘185px‘, btnWidth:‘30px‘, btnHeight:‘80px‘, initTop:‘‘,//初始化离浏览器顶部的距离 extra:‘‘,//因页面布局需要额外向左移动的距离 callback:‘‘//菜单拉出后的回调函数 } var option = $.extend(defaults,opts); this.each(function(){//这一行的this是指$选择器选择到的对象，是一个数组 var _this = $(this);//拿到某一个div var btndiv = _this.find(‘.ss_btn‘); var btnTop = (parseInt(option.contentHeight)-parseInt(option.btnHeight))/2; btndiv.css({width:option.btnWidth,height:option.btnHeight,top:btnTop,position:"absolute",cursor:"pointer"}); var contentdiv = _this.find(‘.ss_content‘); var contentLeft = parseInt(option.btnWidth)+parseInt(btndiv.css(‘borderLeftWidth‘))+parseInt(btndiv.css(‘borderRightWidth‘)); contentdiv.css({width:option.contentWidth,height:option.contentHeight,position:"relative",left:contentLeft,top:"0px"}); var boxInitLeft = parseInt(document.body.clientWidth)-parseInt(option.btnWidth)-parseInt(btndiv.css(‘borderLeftWidth‘))-parseInt(btndiv.css(‘borderRightWidth‘))-option.extra; var boxInitWidth = parseInt(option.btnWidth)+parseInt(btndiv.css(‘borderLeftWidth‘))+parseInt(btndiv.css(‘borderRightWidth‘)); _this.css({width:boxInitWidth,overflow:"hidden",position:"absolute",zIndex:999}); if(!option.initTop){option.initTop = (parseInt(document.body.clientHeight)-parseInt(_this.css(‘height‘))-parseInt(_this.css("borderTopWidth"))-parseInt(contentdiv.css("borderTopWidth")))/2;} _this.css({left:boxInitLeft,top:option.initTop}); var menuYloc = _this.offset().top; //当前窗口的相对偏移 $(window).scroll(function (){ var offsetTop = menuYloc + $(window).scrollTop() +"px"; _this.animate({top : offsetTop },{ duration:600 , queue:false }); }); btndiv.click( function(){ if(parseInt(_this.css("width"))<parseInt($(‘.ss_content‘).css(‘width‘))){ var boxNewWidth = parseInt($(‘.ss_content‘).css(‘width‘))+parseInt($(‘.ss_content‘).css(‘borderLeftWidth‘))+parseInt($(‘.ss_content‘).css(‘borderRightWidth‘))+parseInt($(‘.ss_btn‘).css(‘width‘))+parseInt($(‘.ss_btn‘).css(‘borderLeftWidth‘))+parseInt($(‘.ss_btn‘).css(‘borderRightWidth‘)); var boxNewLeft = parseInt(document.body.clientWidth)-boxNewWidth-option.extra; _this.animate({left:boxNewLeft+‘px‘,width:boxNewWidth+"px"},"slow"); option.callback(); } else{ _this.animate({left:boxInitLeft,width:"30px"},"slow"); } } ) }); } })(jQuery)
下面再附一个使用的demo：
<!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>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .div{float:left;width:30%;height:300px;border:1px solid #f00;} </style> <script type="text/javascript" src="../../jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.sideSwitch.js"></script> <script type="text/javascript"> $(function(){ $(‘#box‘).sideSwitch(); }); </script> </head> <body> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div class="div">文字文字文字</div> <div id="box"><!--侧边栏层--> <div class="ss_btn"> 点我 </div> <div class="ss_content"> 内容区域 </div> </div> <div id="mainbody"><!--主页内容--> <p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zywf/p/4890898.html
