`
kk48323201
  • 浏览: 94087 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Jquery任意位置浮动固定层【插件】

阅读更多
/*任意位置浮动固定层*/
/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/
/*调用:
1 无参数调用:默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

另外新添加了四个新的固定位置方法

middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置
*/
jQuery.fn.floatdiv=function(location){
		//判断浏览器版本
	var isIE6=false;
	var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
	if(Sys.ie && Sys.ie=="6.0"){
		isIE6=true;
	}
	var windowWidth,windowHeight;//窗口的高和宽
	//取得窗口的高和宽
	if (self.innerHeight) {
		windowWidth=self.innerWidth;
		windowHeight=self.innerHeight;
	}else if (document.documentElement&&document.documentElement.clientHeight) {
		windowWidth=document.documentElement.clientWidth;
		windowHeight=document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth=document.body.clientWidth;
		windowHeight=document.body.clientHeight;
	}
	return this.each(function(){
		var loc;//层的绝对定位位置
		var wrap=$("<div></div>");
		var top=-1;
		if(location==undefined || location.constructor == String){
			switch(location){
				case("rightbottom")://右下角
					loc={right:"0px",bottom:"0px"};
					break;
				case("leftbottom")://左下角
					loc={left:"0px",bottom:"0px"};
					break;	
				case("lefttop")://左上角
					loc={left:"0px",top:"0px"};
					top=0;
					break;
				case("righttop")://右上角
					loc={right:"0px",top:"0px"};
					top=0;
					break;
				case("middletop")://居中置顶
					loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};
					top=0;
					break;
				case("middlebottom")://居中置低
					loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};
					break;
				case("leftmiddle")://左边居中
					loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};
					top=windowHeight/2-$(this).height()/2;
					break;
				case("rightmiddle")://右边居中
					loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};
					top=windowHeight/2-$(this).height()/2;
					break;
				case("middle")://居中
					var l=0;//居左
					var t=0;//居上
					l=windowWidth/2-$(this).width()/2;
					t=windowHeight/2-$(this).height()/2;
					top=t;
					loc={left:l+"px",top:t+"px"};
					break;
				default://默认为右下角
					location="rightbottom";
					loc={right:"0px",bottom:"0px"};
					break;
			}
		}else{
			loc=location;
			alert(loc.bottom);
			var str=loc.top;
			//09-11-5修改:加上top为空值时的判断
			if (typeof(str)!= 'undefined'){
				str=str.replace("px","");
				top=str;
			}
		}
		/*fied ie6 css hack*/
		if(isIE6){
			if (top>=0)
			{
				wrap=$("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>");
			}else{
				wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
			}
		}
		$("body").append(wrap);
		
		wrap.css(loc).css({position:"fixed",
			z_index:"999"});
		if (isIE6)
		{
			
			wrap.css("position","absolute");
			//没有加这个的话,ie6使用表达式时就会发现跳动现象
			//至于为什么要加这个,还有为什么要加nothing.txt这个,偶也不知道,希望知道的同学可以告诉我
			//$("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");
		}
		//将要固定的层添加到固定层里
		$(this).appendTo(wrap);
	});
};

这个要配合jquery框架一起使用,平时在项目中用得比较多,现在共享出来,整个文件我都已经打包在附件中

分享到:
评论

相关推荐

    jquery任意位置浮动固定层插件用法实例

    jquery任意位置浮动固定层插件是指jQuery的一个功能扩展,允许开发者创建一个浮动层(div元素),这个层可以固定在网页上的任意位置。当用户滚动页面时,浮动层会保持在视窗中的固定位置,而不是随着页面滚动而移动...

    jquery 插件 任意位置浮动固定层

    基于提供的文件内容,以下是对“jquery 插件 任意位置浮动固定层”知识点的详细解读: ### 插件功能与适用场景 该插件允许网页开发者在使用jQuery的环境下,将网页中的某个HTML元素(如div)浮动到用户指定的位置。...

    jquery 可拖动浮动DIV ,可固定DIV

    `stop`事件处理器则在拖动结束时检查是否需要固定,如果未固定,则根据当前位置固定元素。 通过这种方式,我们可以创建一个既可拖动又可固定在屏幕任意位置的浮动DIV,提升用户的交互体验。当然,实际应用中可能还...

    jQuery 弹出浮动层兼容各种浏览器

    "jQuery 弹出浮动层"指的是在网页上创建一个可以浮动且能在页面上任意位置显示的窗口。这种弹出层通常用于显示警告信息、用户反馈表单或模态对话框。浮动层的关键在于其位置独立于页面其他元素,可以自由移动。 ...

    jquery万能浮动层

    在Web开发中,浮动层(或称为浮动对话框、弹窗)是一种常见的用户界面元素,它可以在页面上任意位置显示信息,不会随着页面滚动而消失。jQuery万能浮动层的核心特性包括: 1. **动态定位**:根据网页内容和窗口大小...

    jQuery CSS3 实现任意拖动的浮动层特效.rar

    jquery 插件配合实现的一款特效,鼠标按住头部,可任意拖动本浮动层,且可设置成透明效果,透明度也可调节。本代码中的部分代码是基于CSS3的原理实现的,因此可兼容于移动端浏览器,在电脑端,IE下的效果表现最差,...

    前端不容错过的jQuery图片滑块插件

    和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片。另外,每张图片也都有文字描述。 在线演示 源码下载 2、jQuery动画焦点图 可自动播放图片 这是一款简单而实用的jQuery焦点图...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    在本文中,我们将深入探讨如何使用jQuery UI的Draggable插件来实现浮动div的拖动排列布局。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如对话框、日期选择器和拖放...

    jQuery图片批量上传插件源码

    资源名:jQuery图片批量上传插件源码 资源类型:程序源代码 源码说明:实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法 界面顶部引入IMGUP....

    可预览移除图片的jQuery多张图片批量上传插件代码.zip

    这是一款可以选择多张图片同时上传,不要的还可以移除,实时预览图片的jQuery多张图片批量上传插件代码。 功能描述 实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复...

    简单的jQuery浮动窗口插件jDialog.zip

    特色介绍 可修改CSS来统一定制UI; ... 一个页面同时只能显示一... 可以点击窗口之外的任意区域来关闭窗口,或是点右上角的关闭按钮. 演示地址: http://huacnlee.github.com/jdialog/ 标签:jDialog

    jQuery插件及其效率提高

    - **jQuery Masonry**: 动态布局插件,用于创建折叠式CSS浮动面板,特别适合创建不等高内容的网格布局。 - **jLayout**: 提供四种布局算法,有助于网页元素的布局安排。 - **jQuery pageSlide**: 类似于Aza Raskin在...

    jQuery版的仿Windows弹出窗口特效.rar

    jQuery版的仿Windows弹出窗口特效,实际上就是一个弹出浮动层效果,和引前有一款JS仿Windows窗口十分相似,前一段由纯JS来实现,这一款由jquery插件来实现。  用此插件实现的弹出式窗口均可以被任意拖动,都有标题...

    jQuery弹出窗插件popModal

    popModal插件的弹出窗口功能允许开发者创建自定义的浮动窗口,可以在页面上自由定位,展示各种内容,如图片、文字或者表单。弹出窗口可以通过JavaScript调用,根据需求动态生成,提供了丰富的定制选项,如尺寸、...

    jQuery 位置插件

    jQuery 位置插件是一种用于网页开发的工具,它允许开发者将特定的HTML元素(通常称为“层”或“div”)固定在用户浏览器窗口的特定位置。即使用户滚动页面,这个元素也会保持在屏幕上的固定位置,从而提供一种始终...

    jQuery UI实现模仿windows操作系统桌面特效代码.zip

    1. **拖放(Draggable)**:jQuery UI的Draggable插件允许用户将元素拖动到页面上的任意位置,类似于Windows桌面上的图标可以被拖动。通过设置选项,我们可以控制元素的拖动限制,如限制在某个容器内或指定拖动方向。 ...

    jquery 中的zxxbox

    zxxbox是一款基于jQuery的浮动窗口插件,专门用于实现弹出对话框、图片浏览、视频播放及登录功能。本文将深入探讨zxxbox的核心特性,以及如何在实际项目中运用它。 首先,理解zxxbox的基本概念是至关重要的。zxxbox...

Global site tag (gtag.js) - Google Analytics