读书人

半透明tooltip的兑现

发布时间: 2012-11-07 09:56:10 作者: rapoo

半透明tooltip的实现

制作半透明的tooltip 无非就是2个div重叠实现的,下面的例子如下:

<html>    <head>        <meta charset="UTF-8" />        <title>QUnit Test Suite</title>        <link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">        <script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/lib/jquery/jquery-1.4.2.js">        </script>        <script type="text/javascript">            $(function(){                            var hideDelay = 500;                var currentID;                var hideTimer = null;                                var container = $('<div name="code">.chart-panel {Z-INDEX: 99999;LEFT: 0%;MARGIN-LEFT: 0px;ZOOM: 1;POSITION: absolute;TOP: 20%;Display: none}.chart-spanBG {background-color: #FFFFCC;POSITION: absolute;FILTER: alpha(opacity:50);opacity: 0.50;width: 100%;height: 100%}.chart-span {width: auto;height: auto;margin: auto;POSITION: relative}.chart-panel .container {Z-INDEX: 2;BORDER-RIGHT: #999 1px solid;BORDER-TOP: #999 1px solid;MARGIN: 0px;OVERFLOW: hidden;BORDER-LEFT: #999 1px solid;BORDER-BOTTOM: #999 1px solid;POSITION: relative}.chart-panel H5 {FONT-WEIGHT: normal;font-size: 10px;margin-left: 5px;margin-right: 5px;white-space: nowrap;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000}

?

?

读书人网 >Web前端

热点推荐