|
|
鼠标移上去后自动会弹出一个框，位置随鼠标位置的改变而改变，代码如下：
<!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>移动鼠标自动弹框</title> <style type="text/css"> a{ border: 1px solid #0f0; margin: 20px; width: 60px; height: 30px; line-height: 30px; float: left; display: block; text-align: center; } .pop{ width: 350px; height: 200px; border: 1px solid #00f; background-color: #ffffee; display: none; position:absolute; /* 注：弹出框必须为绝对定位 */ } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function hidedetails(){ $("#details").hide(); } function showdetails(Obj,orderid){ var d = $(Obj); var pos = d.offset(); var t = pos.top + d.height()+3; // 弹出框的上边位置 var l = pos.left; // 弹出框的左边位置 $("#details").css({ "top": t, "left": l }).show(); $("#details").html("订单 "+orderid+" 的内容！"); } </script> </head> <body> <a href="javascript:void(0)" onmouseout="hidedetails()">订单一</a> <a href="javascript:void(0)" onmouseout="hidedetails()">订单二</a> <a href="javascript:void(0)" onmouseout="hidedetails()">订单三</a> <a href="javascript:void(0)" onmouseout="hidedetails()">订单四</a> <a href="javascript:void(0)" onmouseout="hidedetails()">订单五</a> <div id="details" class="pop"> </div> </body> </html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡