图片提示效果 

<style type="text/css">
ul li{
list-style: none;
float: left;
padding: 10px;
margin:10px;
border:1px solid #cfcfcf;
position: relative;
}
#tooltip{
position:absolute;
}
</style>

html代码：

<body>
<ul>
　　<li><a href="img/demo2/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/demo2/apple_1.jpg" alt="苹果 iPod"></a></li>
　　<li><a href="img/demo2/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/demo2/apple_2.jpg" alt="苹果 iPod"></a></li>
　　<li><a href="img/demo2/apple_3_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/demo2/apple_3.jpg" alt="苹果 iPod"></a></li>
　　<li><a href="img/demo2/apple_4_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/demo2/apple_4.jpg" alt="苹果 iPod"></a></li>
</ul>
</body>

javascript代码：

 1 <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
 2 <script type="text/javascript">
 3 $(function(){
 4 　　var y=20;
 5 　　var x=20;
 6 　　$("li a.tooltip").mouseover(function(e) {
 7 　　　　this.myTitle=this.title;
 8 　　　　this.title="";
 9 　　　　var imgTitle=this.myTitle ? this.myTitle : "";
10 　　　　//创建新元素
11 　　　　var tooltip="<div id='tooltip'><img src='"+ this.href +"' alt=''><br/>"+imgTitle+"</div>";
12 　　　　$("body").append(tooltip);//把它追加到文档中
13 　　　　$("#tooltip").css({
14 　　　　　　"top":(e.pageY+y)+"px",
15 　　　　　　"left":(e.pageX+x)+"px"
16 　　}).show("fast"); 　　//设置x坐标和y坐标，并显示
17 　　}).mouseout(function() {
18 　　　　/* Act on the e */
19 　　　　this.title=this.myTitle;  //考虑到再次滑入的时候需要title，所以再次赋值回this.title
20 　　　　$("#tooltip").remove();//移除
21 　　}).mousemove(function(e) {
22 　　　　/* Act on the e */
23 　　　　$("#tooltip").css({
24 　　　　　　"top":(e.pageY+y)+"px",
25 　　　　　　"left":(e.pageX+x)+"px"
26 　　　　})
27 　　}); 
28 })
29 </script>

注释：

1.当鼠标滑过后，第一，<a>标签的title属性的提示也会出现；第二，是设置x坐标和y坐标的问题，由于自制的坐标和鼠标的距离太近了，有时候会引起无法显示的问题；因此要

清空title，并设置设置x坐标和y坐标；

2.如果要提示效果跟鼠标一起移动，一定要在超链接加上一个mousemove事件；

posted @ 2017-03-31 12:53  代码小精灵  阅读(449)  评论(0)  编辑  收藏  举报