您的位置：首页 > Web前端 > JQuery

jQuery实例: ToolTip的实现

2008-10-14 12:18 323 查看

<!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=gb2312" />

<title>jQuery</title>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript">

$(function(){

$("[myTip]").hover(function(){

$('<div id="luluTip"><div class="triangle" /></div>')

.insertAfter(this)

.prepend($(this).attr("myTip"));

$(this).mousemove(function(e){

ee=e || window.event;

var x=e.pageX-36;

if(x-2<0)

x=2;

if(x+152>document.body.clientWidth)

x=document.body.clientWidth-152;

$("#luluTip").css({"left":x,"top":e.pageY+18,"display":"block"});

});

},function(){

$("#luluTip").fadeOut('slow',function(){

$(this).remove();

});

})

});

</script>

<style type="text/css">

#luluTip

{

word-wrap:break-word; /**//*自动换行,在FF中对英文和数字无效*/

position:absolute;

width:150px;

color: #a00;

background-color:#FFFFCC;

border:1px solid #a00;

padding:10px;

display:none; /**//*我们先不要让它显示*/

}

#luluTip div.triangle /**//*后代选择器,选择ID为"luluTip"中DIV的类为"triangle"的元素*/

{

background:transparent

url('sj.gif')

no-repeat scroll left top;

position:absolute;

height:17px;

left:20px;

top:-16px;

width:31px;

z-index:999;

}

</style>

</head>

<body>

<input id="btnAjax" name="btnAjax" type="button" value="获取" myTip="sssssss" />

<br/>

<a myTip="这是要显示的内容!" href="#">sssssssssss</a>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航