<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } ul{ width: 488px; margin: 0 auto; } ul li{ list-style-type: none; display:inline; float: left; border: thin solid black; margin: 20px 10px; } #tooltip{ position: absolute; border: thin solid black; display: none; background: black; color: white; } </style> <script src="js/jquery-2.1.4.js"></script> <script> $(function(){ var x=10; var y=20; $("a.tooltip").mouseover(function(e)//当前事件对象e { this.myTitle=this.title;//储存当前title的值 this.title="";//移入后title为空 var imgTitle=this.myTitle? "<br/>"+this.myTitle : "";//判断title值，存在则imgTitle为换行后加title值，不存在则为空 var tooltip="<div id=‘tooltip‘><img src=‘"+this.href+"‘ alt=‘产品预览图‘/>"+imgTitle+"</div>";//添加div $("body").append(tooltip);//添加到body $("#tooltip")//获取div .css({ "top":(e.pageY+y)+"px",//div的top为鼠标指针y坐标位置加上10px "left":(e.pageX+x)+"px"//div的top为鼠标指针x坐标位置加上10px }).show("fast");//fast为200毫秒 }).mouseout(function() { this.title=this.myTitle; $("#tooltip").remove();//移除 }).mousemove(function(e)//移动事件 { $("#tooltip") .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" });//移动时，获取鼠标指针位置，让div随鼠标指针移动 })
}) </script></head><body> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 ipod"><img src="images/apple_1.jpg" alt="苹果 ipod"></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 ipod nano"><img src="images/apple_2.jpg" alt="苹果 ipod nano"></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iphone"><img src="images/apple_3.jpg" alt="苹果 iphone"></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 mac"><img src="images/apple_4.jpg" alt="苹果 mac"></a></li> </ul>
</body></html>
时间： 2024-10-05 04:58:39