实现简单的tip浮层：
html代码：
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>demo标题</title> <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script> <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="tip.css" /> <style> p { margin-left:20px; } li { display: block; width: 200px; height: 200px; background: grey; border: 2px solid white; } </style> </head> <body> <h2>基本模式</h2> <ul class="base-style"> <li id="tip1">test1</li> <li id="tip2">test2</li> <li id="tip3">test3</li> <li id="tip4"></li> <li id="tip5"></li> <li id="tip6"></li> <li id="tip7"></li> <li id="tip8"></li> <li id="tip9"></li> <li id="tip10"></li> <li id="tip11"></li> <li id="tip12"></li> </ul> <script> var S = KISSY; if (S.Config.debug) { var srcPath = "../../../"; S.config({ packages:[ { name:"gallery", path:srcPath, charset:"utf-8", ignorePackageNameInUri:true } ] }); } S.use('gallery/tip/1.0/index', function (S, Tip) { var init = function(){ new Tip('#tip1',{ headerText:'跟随鼠标定位', contentText:'鼠标定位点为左下角，默认mouseHook:true', delayIn:100, fleeting:false, closeable:true }); new Tip('#tip2',{ headerText:'相对定位', contentText:'points:["tl","br"],mouseHook:false', points:['tl','br'], mouseHook:false, delayIn:100 }); new Tip('#tip3',{ headerText:'相对定位', contentText:'不需要箭头,points:["tr","bl"],arrow:false', points:['tr','bl'], mouseHook:false, arrow:false, delayIn:100 }); new Tip('#tip4',{ headerText:'相对定位', contentText:'带箭头,points:["tr","bl"],arrow:true', points:['tl','bl'], offsetX:-15, mouseHook:false, delayIn:100 }); new Tip('#tip5',{ headerText:'相对定位', contentText:'points:["lb","tr"],arrow:false', points:['lb','tr'], mouseHook:false, arrow:false, delayIn:100 }); new Tip('#tip6',{ headerText:'定位到很远', contentText:'points:["lb","tr"],offsetX:-123', points:['lb','tr'], mouseHook:false, offsetX:-132, arrow:false, delayIn:100 }); new Tip('#tip7',{ headerText:'鼠标跟随定位', contentText:'跟随鼠标移动而移动 withMouseMove:true', withMouseMove:true, arrow:false, delayIn:100 }); new Tip('#tip8',{ contentText:'没有标题,headerText:""', arrow:false, delayIn:100 }); new Tip('#tip9',{ headerText:'没有正文,contentText:""', contentText:'', arrow:false, delayIn:100 }); new Tip('#tip10',{ headerText:'定义offsetX和offsetY', contentText:'points:["lb","tr"],offsetX:-20,offsetY:-100', mouseHook:false, offsetX:-30, offsetY:-100, points:['lb','tr'], arrow:false, delayIn:100 }); new Tip('#tip11',{ headerText:'鼠标跟随的offsetX和offsetY', contentText:'withMouseMove:true,offsetX:-20,offsetY:-100', withMouseMove:true, offsetX:-30, offsetY:-100, arrow:false, delayIn:100 }); new Tip('#tip12',{ headerText:'带箭头的offsetX和offsetY', contentText:'arrow:true,points:["lb","tr"],offsetX:-120,offsetY:-30', withMouseMove:true, mouseHook:false, arrow:true, offsetX:-128, offsetY:-30, points:['tc','bc'], delayIn:100, smarty:false }); new Tip('#simpletip'); new Tip('#t1',{ contentText:'鼠标可以移入Tip', fleeting:false, delayIn:100 }); new Tip('#t2',{ contentText:'鼠标不可以移入Tip', delayIn:100 }); }; S.ready(function(){ init(); }); // var tip = new Tip("#tip"); }) </script> </body> </html>
style.css:
.base-style { width:160px;height:52px; } .base-style li { display:block; float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:6px;margin-top:6px; cursor:pointer; } .custom-tip-style { width:300px;border:5px solid #116497; padding:0px; border-radius:4px; } .custom-tip-style .hd { background-color: #0D7CD0; color:white; font-size:11px; padding:4px; } .custom-tip-style .z-close { position:absolute; width:18px;height:14px; cursor:pointer; font:bold 10px/13px Tahoma,sans-serif; text-align:center; border:0px solid #aaa; background:#116497; color:white; text-indent:0; border-radius:3px; vertical-align:middle; text-decoration:none; display:block; top:4px;right:4px; display:none; } .custom-tip-style .bd{ padding:5px; line-height:150%; background:#1E90FF; color:white; font-size:11px; }
tip.css:
.z-tip { border-radius:4px; box-shadow:0px 0px 8px 1px #bbb; background:white; border:1px solid #cfcfcf; padding:8px; position:absolute; /*test*/ left:100px; margin-top:20px; } .z-tip { max-width:350px; min-width:120px; /* *expression((this.width > 350) ? "350px" : this.width + "px" ); */ } .z-tip .z-taper { background:url('http://img03.taobaocdn.com/tps/i3/T1bEXSFXtgXXaSQP_X-16-16.png') no-repeat transparent; display:block; overflow:hidden; position:absolute; } .z-tip .z-close { position:absolute; width:18px;height:14px; cursor:pointer; font:bold 10px/13px Tahoma,sans-serif; text-align:center; border:1px solid #aaa; color:#777; text-indent:0; border-radius:3px; vertical-align:middle; text-decoration:none; display:block; top:4px;right:4px; display:none; } .tl .z-taper{ background-position:0px 0px; width:16px;height:8px; top:-8px; left:15px; } .tc .z-taper{ background-position:0px 0px; width:16px;height:8px; top:-8px; left:50%; margin-left:-8px; } .tr .z-taper{ background-position:0px 0px; width:16px;height:8px; top:-8px; right:15px; } .br .z-taper{ background-position:0px -8px; width:16px;height:8px; bottom:-8px; right:15px; } .bl .z-taper{ background-position:0px -8px; width:16px;height:8px; bottom:-8px; left:15px; } .bc .z-taper{ background-position:0px -8px; width:16px;height:8px; bottom:-8px; left:50%; margin-left:-8px; } .rt .z-taper{ background-position:-8px 0px; width:8px;height:16px; right:-8px; top:15px; } .rb .z-taper{ background-position:-8px 0px; width:8px;height:16px; right:-8px; bottom:15px; } .rc .z-taper{ background-position:-8px 0px; width:8px;height:16px; right:-8px; top:50%; margin-top:-8px; } .lt .z-taper{ background-position:0px 0px; width:8px;height:16px; left:-8px; top:15px; } .lb .z-taper{ background-position:0px 0px; width:8px;height:16px; left:-8px; bottom:15px; } .lc .z-taper{ background-position:0px 0px; width:8px;height:16px; left:-8px; top:50%; margin-top:-8px; }
在网上看了个写的非常好的tip浮层实现，收了...
原文地址：http://gallery.kissyui.com/tip/1.0/guide/index.html
GitHub：https://github.com/kissygalleryteam/tip