jquery插件:点击拉出的右侧滑动菜单
就是一个停留在页面右侧的滑动菜单,点击可以拉出,带回调函数。宽高位置可以参数指定。插件代码如下:
(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插件:点击拉出的右侧滑动菜单的更多相关文章
- jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- html5手机端的点击弹出侧边滑动菜单代码
效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...
- jquery插件——点击交换元素位置(带动画效果)
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...
- jquery实现点击页面空白隐藏指定菜单
注意:dmenu是一个div的class名哦 代码如下 复制代码 $('html,body').click(function(e){ if(e.target.id.indexOf("dme ...
- jQuery 实现点击页面其他地方隐藏菜单
点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- 使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...
随机推荐
- 基于Redis的CAS服务端集群
为了保证生产环境CAS(Central Authentication Service)认证服务的高可用,防止出现单点故障,我们需要对CAS Server进行集群部署. CAS的Ticket默认是以Ma ...
- xilinx FPGA普通IO作PLL时钟输入
本帖转自于 :http://www.cnblogs.com/jamesnt/p/3535073.html 在xilinx ZC7020的片子上做的实验; [结论] 普通IO不能直接作PLL的时钟输入, ...
- ExtJS 4 组件详解
ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component)",所有组件都是Ext.Component的子类,Ext.Component提供了生 ...
- kibaba 选择字段
- DSP开发资源总结,经典书籍,论坛
OMAP4开发资源总结: 一.TI OMAP4官网介绍: http://www.ti.com.cn/general/cn/docs/wtbu/wtbuproductcontent.tsp?templa ...
- Visual Studio Code 与 Github 集成
使用Visual Studio Code进行Nodejs开发充满了便利,为了更好的进行开发工作,有必要使用Github进行代码管理. Visual Studio Code已经集成了GIT组件: htt ...
- nova-network创建初始化网络
nova-network创建初始化网络
- HBase技术介绍
HBase简介 HBase - Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...
- linux下安装mysql-community后起不来
wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpmrpm -ivh http://repo.mysql.com/my ...
- SpringMVC+SwfUpload进行多文件同时上传
由于最近项目需要做一个多文件同时上传的功能,所以好好的看了一下各种上传工具,感觉uploadify和SwfUpload的功能都比较强大,并且使用起来也很方便.SWFUpload是一个flash和js相 ...