实现简单的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:;
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;
/*
*width: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:;
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