发布于 2017-04-25 22:15:31 | 45 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.

1.效果如图

  

2.实现思路

  1 鼠标移入标题(这里是<a>标签)

    创建一个div,div的内容为鼠标位置的文本

    将创建好的div加到文档中

    为提示层设置位置

  2 鼠标移出标题

    移除div

  3 当鼠标在标题内移动时

    同样添加div效果

3.JQuery实现代码

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<style type="text/css"> 
body 
{ 
font-size:12px; 
} 
a 
{ 
text-decoration:none; 
} 
a:hover 
{ 
color:#CC0000; 
} 
#main 
{ 
margin:100px auto; 
width:350px; 
height:150px; 
border:solid #aaa 1px; 
} 
.tr_color{ 
background-color:#aaa; 
} 
</style> 
<script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
$("tr:even").addClass("tr_color"); 
$("#tb a").mouseover(function(e){ 
var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>"; 
$("body").append(toolTip); 
$("#tooltip").css({ 
"top" :e.pageY + "px", 
"left" :e.pageX + "px" 
}); 
$("#tb a").mouseout(function(){ 
$("#tooltip").remove(); 
}); 
$("#tb a").mousemove(function(e){ 
$("#tooltip").css({ 
"top" :(e.pageY+5) + "px", 
"left" :(e.pageX+2) + "px" 
}); 
}); 
//alert("Y:" + e.pageY + "X:" + e.pageX); 
}); 
}); 
</script> 
<body> 
<div id="main"> 
<h5>JQuery--鼠标跟随提示</h5> 
<table id="tb" width="100%"> 
<tr> 
<td><a href="#">中秋快乐11</a></td> 
<td><a href="#">中秋快乐12</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐21</a></td> 
<td><a href="#">中秋快乐22</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐31</a></td> 
<td><a href="#">中秋快乐32</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐41</a></td> 
<td><a href="#">中秋快乐42</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐51</a></td> 
<td><a href="#">中秋快乐52</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐61</a></td> 
<td><a href="#">中秋快乐62</a></td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务