微博の名刺作り

2177 ワード

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var H = 0;

        var W = 0;

        var divobj = document.createElement("div");

        divobj.style.position = "fixed";

        divobj.style.border = "solid 10px red";

        divobj.style.width = "230px";

        divobj.style.height = "180px";

        divobj.style.zIndex = 100;

        divobj.style.backgroundColor = "#005eac";

        var obj;

        $(document).ready(function () {

            $("body div").live("mouseover", function () {

                obj = $(this);

                if (obj.attr("id") == undefined)

                    return;

                H = obj.offset().top;

                W = obj.offset().left;

                divobj.style.top = (H + obj.height() + 10) + "px";

                divobj.style.left = (W - (obj.width() / 2)) + "px";

                divobj.innerHTML = "     divid:" + obj.attr("id");

                $("body").prepend(divobj);

                $(divobj).fadeIn(400);

            });

            $("body div").live("mouseout", function () {

                window.setTimeout(closediv, 600, obj);

            });



        });

        function closediv(objs) {

            if(objs==obj)

            $(divobj).fadeOut(400);

        }

    </script>

</head>

<body>

    <div id="Boss" style="border: 3px solid red; position: fixed; top: 20px; left: 400px; height: 200px;">1sdfsdfsdfsdfsdf</div>

    <div id="Div1" style="border: 3px solid red; position: fixed; top: 20px; left: 600px; height: 200px;">sdfsdfsdfsdfsdf</div>

</body>

</html>