【www.gdgbn.com--jquery】

代码一

<script type="text/网页特效">
$(document).ready(function() {
//tips教程: jquery div层在页面内默认绝对居中
$("#contentwrap").each(function(i,o){
         $(o).css教程("left",(($(document).width())/2-(parseint($(o).width())/2))+"px");
         $(o).css("top",(($(document).height())/2-(parseint($(o).height())/2))+"px");
        })
});
</script>

层：

 程序代码

注：jquery可以引自google api，加载速度、缓存都很不错，得益于google的分布式网络，不放演示了，pjblog的ubb运行代码能力有限~~：

 程序代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

方法二

jquery div屏幕居中  20:58var windowwidth = document.documentelement.clientwidth;
var windowheight = document.documentelement.clientheight;
var popupheight = $("#popupcontact").height();
var popupwidth = $("#popupcontact").width();
//centering
$("#popupcontact").css({
    "position": "absolute",
    "top": windowheight/2-popupheight/2,
    "left": windowwidth/2-popupwidth/2
});

方法三

$("a").click(function(e){
        e.preventdefault();
        var o=$("#id");
        var itop=(document.documentelement.clientheight-o.height())/2+document.documentelement.scrolltop;
        var ileft=(document.documentelement.clientwidth-o.width())/2+document.documentelement.scrollleft;
        o.css({
            position:"absolute",
            top:itop+"px",
            left:ileft+"px"
        }).show();
});

下面来看一款实例

   

    <script type="text/javascript" src="http://www.111cn.net/zheng_heng_shao/blog/js/jquery-1.3.1.min.js"></script>

    <script type="text/javascript" src="http://mb.111cn.net/zheng_heng_shao/blog/js/jquery.dragndrop.js"></script>

   
    <script type="text/javascript">
        var pagestyle = function() {
           var bh = $(document).height();
            var bw = $(document).width();
            $("#fullbg").css({ width: bw, height: bh});
        }
        //注册窗体改变大小事件 
        $(window).resize(pagestyle);
        //注册弹出层拖动事件
        $().ready(function() {
            $(".dragdiv2").drags({
                handler: ".handler2",              
                zindex:200,
                opacity:.9
            });
        });
        //显示灰色js遮罩层 显示弹出层
        function showbg(ct, content) {
            var bh = $(document).height();
            var bw = $(document).width();
            $("#fullbg").css({ width: bw, height: bh, display: "block" });
            $(".dragdiv2").css("display", "block")
            .css("left",(($(document).width())/2-(parseint($(".dragdiv2").width())/2))+"px")
            .css("top",(($(document).height())/2-(parseint($(".dragdiv2").height())/2))+"px");
        }
        //关闭灰色js遮罩层 关闭弹出层
        function closebg() {
            $("#fullbg").css("display", "none");
            $(".dragdiv2").css("display", "none");
        }
    </script>

   
   
   
    显示
   
   
       

            drag me too关闭

       
            { zindex: 200, opacity: .9 }
       
   
   

 

jquery插件

 

 

///

//(function($) {
    $.extend($.fn, {
        getcss: function(key) {
            var v = parseint(this.css(key));
            if (isnan(v))
                return false;
            return v;
        }
    });
    $.fn.drags = function(opts) {
        var ps = $.extend({
            zindex: 20,
            opacity: .7,
            handler: null,
            onmove: function() { },
            ondrop: function() { }
        }, opts);
        var dragndrop = {
            drag: function(e) {
                var dragdata = e.data.dragdata;
                dragdata.target.css({
                    left: dragdata.left + e.pagex - dragdata.offleft,
                    top: dragdata.top + e.pagey - dragdata.offtop
                });
                dragdata.handler.css({ cursor: "move" });
                dragdata.onmove(e);
            },
            drop: function(e) {
                var dragdata = e.data.dragdata;
                dragdata.target.css(dragdata.oldcss); //.css({ "opacity": "" });
                dragdata.handler.css("cursor", dragdata.oldcss.cursor);
                dragdata.ondrop(e);
                $().unbind("mousemove", dragndrop.drag)
                    .unbind("mouseup", dragndrop.drop);
            }
        }
        return this.each(function() {
            var me = this;
            var handler = null;
            if (typeof ps.handler == "undefined" || ps.handler == null)
                handler = $(me);
            else
                handler = (typeof ps.handler == "string" ? $(ps.handler, this) : ps.handle);
            handler.bind("mousedown", { e: me }, function(s) {
                var target = $(s.data.e);
                var oldcss = {};
                if (target.css("position") != "absolute") {
                    try {
                        target.position(oldcss);
                    } catch (ex) { }
                    target.css("position", "absolute");
                }
                oldcss.cursor = target.css("cursor") || "default";
                oldcss.opacity = target.getcss("opacity") || 1;
                var dragdata = {
                    left: oldcss.left || target.getcss("left") || 0,
                    top: oldcss.top || target.getcss("top") || 0,
                    width: target.width() || target.getcss("width"),
                    height: target.height() || target.getcss("height"),
                    offleft: s.pagex,
                    offtop: s.pagey,
                    oldcss: oldcss,
                    onmove: ps.onmove,
                    ondrop: ps.ondrop,
                    handler: handler,
                    target: target
                }
                target.css("opacity", ps.opacity);
                $().bind("mousemove", { dragdata: dragdata }, dragndrop.drag)
                    .bind("mouseup", { dragdata: dragdata }, dragndrop.drop);
            });
        });
    }
//})(jquery);

本文来源：http://www.gdgbn.com/wangyezhizuo/27435/