仿Google地图Tooltip

最新推荐文章于 2024-11-27 15:48:18 发布

原创最新推荐文章于 2024-11-27 15:48:18 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #javascript #class #div #border #stylesheet

Web 专栏收录该内容

11 篇文章

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个仿Google地图样式的Tooltip。通过HTML结构设定Tooltip的内容布局，CSS定义样式，JavaScript实现动态创建和定位Tooltip。Tooltip包括了多个元素，如关闭按钮、内容区域以及不同位置的图像边框。

1、HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <mce:script type="text/javascript" src="../jquery/jquery-1.4.2.min.js" mce_src="jquery/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript" src="../script/tooltip.js" mce_src="script/tooltip.js"></mce:script> <link rel="stylesheet" type="text/css" href="../css/tooltip.css" mce_href="css/tooltip.css"> <title>tool tip</title> </head> <body> <div id="container"> <div class="tooltip"> <div class="content"> <div class="close_btn"></div> <div class="content_div"> <div class="content_top">地址：</div> <div class="content_middle">湖北省武汉市洪山区</div> <div class="content_bottom"> <a href="javascript:void(0);" mce_href="javascript:void(0);">获取路线</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">在附近搜索</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">保存到...</a> <a href="javascript:void(0);" mce_href="javascript:void(0);">更多</a> <span class="more_btn">▼</span> </div> </div> </div> <div class="left_top"> <img src="../image/tooltip.png" mce_src="image/tooltip.png"> </div> <div class="top_center"></div> <div class="right_top"> <img src="../image/tooltip.png" mce_src="image/tooltip.png"> </div> <div class="middle_center"></div> <div class="left_bottom"> <img src="../image/tooltip.png" mce_src="image/tooltip.png"> </div> <div class="bottom_center"></div> <div class="right_bottom"> <img src="../image/tooltip.png" mce_src="image/tooltip.png"> </div> <div class="arrow"> <img src="../image/tooltip.png" mce_src="image/tooltip.png"> </div> </div> <div id="content"> <input type="text" id="test" onblur="check()"> </div> </div> </body> </html>

2、CSS

@CHARSET "UTF-8"; #container { width: 1000px; margin: 0 auto; position: relative; } .tooltip { position: absolute; } .content { width: 300px; height: 150px; position: relative; left:0; top:0; z-index:100; } .left_top{ width:25px; height:25px; overflow:hidden; position:absolute; left:0; top:0; z-index:1; } .left_top img{ border:none; width: 690px; height: 786px; margin: 0; position: absolute; left: 0; top: 0; } .top_center{ width:250px; height:25px; border-top:1px solid #ABABAB; position:absolute; left:25px; top:0; } .right_top{ width:25px; height:25px; overflow:hidden; position:absolute; left:275px; top:0; z-index:1; } .right_top img{ border:none; width:690px; height:786px; margin:0; position:absolute; left:-665px; top:0; } .middle_center{ width: 298px; height : 100px; border-left: 1px solid #ABABAB; border-right: 1px solid #ABABAB; position: absolute; left:0; top: 25px; } .left_bottom{ width:25px; height:25px; overflow:hidden; position:absolute; left:0; top:125px; z-index:1; } .left_bottom img{ border:none; width:690px; height:786px; margin:0; position:absolute; left:0; top:-665px; } .bottom_center{ width:250px; height:24px; border-bottom:1px solid #ABABAB; position: absolute; left : 25px; top:125px; } .right_bottom{ width: 25px; height: 25px; overflow: hidden; position: absolute; left: 275px; top: 125px; z-index: 1; } .right_bottom img{ border: none; width: 690px; height : 786px; margin: 0; position: absolute; left: -665px; top: -665px; } .arrow{ width:97px; height:96px; overflow:hidden; position:absolute; left:97px; top:135px; z-index:1; } .arrow img{ border: none; width: 690px; height : 786px; margin: 0; position: absolute; left: 0; top: -701px; } .close_btn{ width:12px; height:12px; background:transparent url(../image/button.png) no-repeat scroll -24px 0; cursor:pointer; position:absolute; right:10px; top:10px; } .content_div{ width:270px; height:120px; position:absolute; left:15px; top:15px; } .content_top{ font-weight:bold; height:20px; } .content_middle{ height:80px; font-size:80%; } .content_bottom{ height:20px; font-size:80%; } .more_btn{ color:#0000CC; cursor:pointer; font-size:80%; } #content{ position:relative; top:500px; }

3、JavaScript