微博名片制作
<!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>