就是一个停留在页面右侧的滑动菜单，点击可以拉出，带回调函数。宽高位置可以参数指定。插件代码如下：

（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>

jquery插件：点击拉出的右侧滑动菜单的更多相关文章

  1. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. html5手机端的点击弹出侧边滑动菜单代码

    效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...

  3. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  4. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  5. jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...

  6. jquery实现点击页面空白隐藏指定菜单

    注意:dmenu是一个div的class名哦 代码如下 复制代码 $('html,body').click(function(e){  if(e.target.id.indexOf("dme ...

  7. jQuery 实现点击页面其他地方隐藏菜单

    点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...

  8. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  9. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

随机推荐

  1. laravel框架——上传、下载文件

    文件上传 在config文件夹下新建一个 项目名.php return [ 'title' => 'My Test', 'posts_per_page' => 5, 'uploads' = ...

  2. WebApp之Meta标签 （关闭自动识别数字为电话号码或邮箱之类）

    iPhone上的Safari(还有些webkit android手机浏览器)会自动对看起来像是电话号码的数字串(包括已经加入连字符或括号格式化过的)添加电话链接,点击之后会询问用户是否想要拨打该号码. ...

  3. 转：eclipse载入extjs4出现内存溢出错误的解决方法

    去掉.project文件中的以下部分:第一部分:<buildCommand>    <name>org.eclipse.wst.jsdt.core.javascriptVali ...

  4. yo angualr-fullstatck 项目打包部署

    yoeman使用grunt进行打包部署,直接运行grunt命令即可,期间会对代码进行检查,如果存在不规范的地方jshint会指定出来． grunt会对静态资源进行打包而且对资源文件名进行了MD5作为版 ...

  5. MV规范 ---ISO7816 T=1协议的时间特性

    终端发送的连续字符之间的时间间隔应在11etu域42etu之间,卡片应能正确接收终端发送的时间间隔为11.8+Netu的连续字符. 卡片发出的连续字符之间的时间间隔最小为11etu,终端应能正确接收卡 ...

  6. 转:Java同步synchronized使用

    原文链接 作者:Jakob Jenkov Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免竞争.本文介绍以下内容: Java同步关键字(s ...

  7. fragment的实现与互相通信

    Android3.0后出来的新控件,主要是为了在平板和手机屏幕的兼容 实现效果: 点击Sd卡,出现SD目录下的所有文件和文件夹,点击外置Sd卡,出现外置Sd卡目录下的文件和文件夹.点击U盘,出现U盘目 ...

  8. 【git】git常用命令简介

    使用Git也好长时间了,但一直没系统的学习过,现在总结以下工作中用到的,记录以下,以后忘记了可以来看看. 因为操作系统是Windows,所以将简单介绍一下通过git bash命令行的使用: 本文将不介 ...

  9. 前端工程师和web工程师的差异

    摘自园内一篇文章关于web工程师的思考,比较认同其中的一些观点 前端工程师知识结构:               精通: xhtml,css,JavaScript       熟悉:一种后端程序语言( ...

  10. 《Ruby语言入门教程v1.0》学习笔记-03

    10.09 第七章 7.1 模块 Ruby标准包里的 Math 模块提供了许多方法,比如:求平方根 sqrt ,使用的时候要这么写:模块名.方法名(参数).如:Math.sqrt( a*5+b ) M ...