jQuery位置插件

最新推荐文章于 2024-03-14 07:30:00 发布

greatverve

最新推荐文章于 2024-03-14 07:30:00 发布

阅读量1.1k

点赞数

分类专栏： JS.JQuery 文章标签： jquery function border string html null

本文链接：https://blog.csdn.net/greatverve/article/details/3601098

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

插件代码：

 
 /*任意位置浮动固定层*/
/*没剑(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>
 

end

greatverve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery位置插件

插件代码： /*任意位置浮动固定层*//*没剑(http://regedit.cnblogs.com) 08-03-11*//*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*//*2008-4-1修改：当自定义right位置时无效，这里加上一个判断有值时就不设置，无值时要加18px已修正层位置在ie6下的问题*/
复制链接

扫一扫

专栏目录