jQuery 位置插件


Posted in Javascript onDecember 25, 2008

插件代码:
/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com) 08-03-11*/
/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/
/*2008-4-1修改:当自定义right位置时无效,这里加上一个判断
有值时就不设置,无值时要加18px已修正层位置在ie6下的问题
*/
/*调用:
1 无参数调用:默认浮动在右下角
$("#id").floatdiv();
2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");
3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置
*/
jQuery.fn.floatdiv=function(location){
//ie6要隐藏纵向滚动条
var isIE6=false;
if($.browser.msie && $.browser.version=="6.0"){
$("html").css("overflow-x","auto").css("overflow-y","hidden");
isIE6=true;
};
$("body").css({margin:"0px",padding:"0 10px 0 10px",
border:"0px",
height:"100%",
overflow:"auto"
});
return this.each(function(){
var loc;//层的绝对定位位置
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"};
break;
case("righttop")://右上角
loc={right:"0px",top:"0px"};
break;
case("middle")://居中
var l=0;//居左
var t=0;//居上
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;
}
l=windowWidth/2-$(this).width()/2;
t=windowHeight/2-$(this).height()/2;
loc={left:l+"px",top:t+"px"};
break;
default://默认为右下角
loc={right:"0px",bottom:"0px"};
break;
}
}else{
loc=location;
}
$(this).css("z-index","9999").css(loc).css("position","fixed");
if(isIE6){
if(loc.right!=undefined){
//2008-4-1修改:当自定义right位置时无效,这里加上一个判断
//有值时就不设置,无值时要加18px已修正层位置
if($(this).css("right")==null || $(this).css("right")==""){
$(this).css("right","18px");
}
}
$(this).css("position","absolute");
}
});
};
使用方法:
<!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>
<title>任意位置浮动窗口插件</title>
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../js/jquery.floatDiv.js"></script>
<script type="text/javascript">
$(function(){
$("#test").floatdiv({top:"200px",right:"200px"});
$("#rtop").floatdiv("righttop");
$("#floatAd").floatdiv({top:"50px",left:"50px"});
});
</script>
</head>
<body>
<div id="rtop" style="background-color: #666633; width: 300px; height: 100px;padding:2px;color:white;">右上角</div>
<div id="floatAd" style="background-color: #667733; width: 300px; height: 100px;padding:2px;color:white;">左下角</div>
<div id="test" style="background-color: #665533; width: 300px; height: 100px;padding:2px;color:white;">
<p>
/*任意位置浮动固定层*/<br />
/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/<br />
/*调用:<br />
1 无参数调用:默认浮动在右下角<br />
$("#id").floatdiv();</p>
<p>
2 内置固定位置浮动<br />
//右下角<br />
$("#id").floatdiv("rightbottom");<br />
//左下角<br />
$("#id").floatdiv("leftbottom");<br />
//右下角<br />
$("#id").floatdiv("rightbottom");<br />
//左上角<br />
$("#id").floatdiv("lefttop");<br />
//右上角<br />
$("#id").floatdiv("righttop");<br />
//居中<br />
$("#id").floatdiv("middle");</p>
<p>
3 自定义位置浮动<br />
$("#id").floatdiv({left:"10px",top:"10px"});<br />
以上参数,设置浮动层在left 10个像素,top 10个像素的位置<br />
*/</p>
</div>
<div>hello<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
hello
</div>
</body>
</html>

Javascript 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
jQuery 浮动广告实现代码
Dec 25 #Javascript
jQuery 操作XML入门
Dec 25 #Javascript
jQuery 动画基础教程
Dec 25 #Javascript
javascript jQuery插件练习
Dec 24 #Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 #Javascript
javascript 网页跳转的方法
Dec 24 #Javascript
javascript prototype,executing,context,closure
Dec 24 #Javascript
You might like
解析php中memcache的应用
2013/06/18 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php 数组元素快速去重
2017/05/05 PHP
百度地图自定义控件分享
2015/03/04 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
VUE前后端学习tab写法实例
2019/08/06 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
保证书范文大全
2014/04/28 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
责任书格式
2019/04/18 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL