今天用jquery写了一个标签提示功能的小程序,发现jquery真是叫锋利
<!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=utf-8" />
<title>超链接提示效果</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x= 100;
var y= 100;
$("a.a1")
//鼠标移入
.mouseover(function(e){
//添加一个属性暂存title,可以随意添加啊,好棒
this.temp= this.title;
//创建div元素
var div1= "<div id='div1'>"+this.title+"</div>";
$("body").append(div1);
//设置div的x,y坐标
$("#div1")
.css(
{
"top":(e.clientY+y)+"px",
"left":(e.clientX+x)+"px"
}
).show("fast");
this.title="";
})//注意,千万注意这个地方不要习惯性的加一个分号!上次因为这个小小的分号调试了好久。为什么,因为对"a.a1"对象的事件没有结束啊,如果加上分号下面的事件就没有主人了
//鼠标移出
.mouseout(function(){
//再次添加上,以备下一次鼠标滑入时提供注释。
this.title= this.temp;
$("#div1").remove();
})
//鼠标移动
.mousemove(function(e){
$("#div1")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageY+x)+"px"
})
});
});
</script>
</head>
<body>
<p><a href="#" class="a1" title="这是用jQuery的超链接">标签1</a></p>
<p><a href="#" title="这是不用jQuery的超链接">标签2</a></p>
<!--可以看看两个超链接的提示时间,就可以发现jquery真的很锋利!-->
</body>
</html>