摘要：
它是页面右侧的滑动菜单。单击它可使用回调函数将其拉出。宽度和高度位置可以由参数指定。插件代码如下：（function（$）｛$.fn.sideSwitch=function（options）｛vardefaults=｛contentWidth:“400px”，contentHeight:“185px”，btnWidth:“30px”，btnHeight:“80px”，initTop:“”，//与浏览器顶部的初始化距离是额外的：“”，//页面布局需要与左侧回调的额外距离：“”//拉出菜单后的回调函数｝varoption=$。扩展（默认值，选项）；这每一个（function（））｛//这一行中的对象是指$选择器选择的对象，它是一个数组var_This=$（This）；//获取一个divvarbtndiv=_This.find（'.ss_btn'）；varbtnTop=（parseInt（option.contentHeight）-parseInt（options.btnEight））/2；btndiv.css（｛option.btnWidth，height:option.btnEights，top:btnTop，position:“absolute”，cursor:“pointer”｝）；varcontentdiv=_ this.find（'.ss_content'）；varcontentLeft=parseInt（option.btnWidth）+parseInt（btndiv.css（'borderLeftWidth'））+parse Int（btndiv.css（'border RightWidth'）；contentdiv.css（{option.contentWidth，height:option.content-height，position:“relative”，left:contentLeft，top:“0px”}）；varboxInitLeft=parseInt（document.body.clientWidth）-parseInt（option.btnWidth）/parseInt。额外的varboxInitWidth=parseInt（option.btnWidth）+parseInt（btndiv.css（'borderLeftWidth'））+parse Int（btndiv.css（'border RightWidth'）；_这css（｛boxInitWidth，溢出：“hidden”，位置：“absolute”，zIndex:999｝）；如果（！
就是一个停留在页面右侧的滑动菜单，点击可以拉出，带回调函数。宽高位置可以参数指定。插件代码如下：
（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({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({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({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',boxNewWidth+"px"},"slow"); option.callback(); } else{ _this.animate({left:boxInitLeft,"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>