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 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
微信小程序开发摇一摇功能
Nov 22 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函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Python素数检测的方法
2015/05/11 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python中的随机函数random的用法示例
2018/01/27 Python
python实现微信远程控制电脑
2018/02/22 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
会计系个人求职信范文分享
2013/12/20 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
中学教师管理制度
2014/01/14 职场文书
上课玩手机检讨书
2014/02/08 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏