jquery鼠标点击放大展开弹出框

浏览数：17 / 时间：2015年06月09日

html：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标点击放大展开弹出框</title>
</head>
<body>

<script src="jquery.1.8.2.min.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $("#demo").demo();
});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,‘Segoe UI‘;}

#main{width:1000px;height:1500px;background:#F0F0F0;overflow:hidden;margin:0 auto;} 

#demo{position:fixed;z-index:99;cursor:pointer;left:0px;top:30px;width:20px;height:50px;background:#000;color:#FFF;text-align:center;}
#zhezhao{position:fixed;z-index:98;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background:#000;}
#close{position:absolute;right:0;top:0;color:#F00;}
</style>

<div id="main"></div>

<div id="demo">
    <h3>点我</h3>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

js：

// JavaScript Document
(function(a) {
    a.fn.extend({
        demo:function() {
            var b = a(this);
            var p = b.width();
            var o = b.height();
            var l = b.css("position");
            var i = a(window).width();
            var f = a(window).height();
            var g = "normal";
            var c = 500;
            var k = 400;
            var d = b.css("left");
            var n = b.css("top");
            var e = (i - c) / 2;
            var h = (f - k - 20) / 2;
            var j = a("<div>", {
                id:"zhezhao"
            });
            var m = a("<a>", {
                id:"close",
                href:"javascript:void(0)",
                text:"关闭"
            });
            m.bind("click", function() {
                j.animate({
                    width:c,
                    height:k,
                    left:e,
                    top:h
                }, function() {
                    j.remove();
                    m.detach();
                    b.animate({
                        width:p,
                        height:o,
                        left:d,
                        top:n
                    }, g, function() {
                        b.on("click", function() {
                            b.animate({
                                width:c,
                                height:k,
                                left:e,
                                top:h
                            }, g, function() {
                                m.appendTo(b);
                                b.off("click");
                                j.appendTo("body").css({
                                    width:c,
                                    height:k,
                                    left:e,
                                    top:h
                                }).animate({
                                    width:"100%",
                                    height:"100%",
                                    left:0,
                                    top:0
                                }, g);
                            });
                        });
                    });
                });
            });
            b.on("click", function() {
                b.animate({
                    width:c,
                    height:k,
                    left:e,
                    top:h
                }, g, function() {
                    m.appendTo(b);
                    b.off("click");
                    j.appendTo("body").css({
                        width:c,
                        height:k,
                        left:e,
                        top:h
                    }).animate({
                        width:"100%",
                        height:"100%",
                        left:0,
                        top:0
                    }, g);
                });
            });
        }
    });
})(jQuery);