<!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> <!-- 引入jQuery --> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline-block; margin-right:10px; border:1px solid #AAAAAA; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff; } .sub{ position: absolute; } </style></head><body> <h3>有效果：</h3> <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> <br/><br/><br/><br/> <br/><br/><br/><br/> </body><script type="text/javascript">var list=document.getElementsByTagName("img");var body=document.getElementsByTagName("body")[0];var arr=new Array("images/apple_1_bigger.jpg","images/apple_2_bigger.jpg","images/apple_3_bigger.jpg","images/apple_4_bigger.jpg");var sub;for(var i=0;i<list.length;i++){ list[i].index=i; list[i].onmouseenter=function(){ sub=document.createElement("img"); sub.src=arr[this.index]; sub.style.display="block"; sub.style.position="absolute"; body.appendChild(sub); console.log(123); } list[i].onmousemove=function(e){ sub.style.left=e.clientX+"px"; sub.style.top=e.clientY+"px"; console.log(456); } list[i].onmouseleave=function(){ body.removeChild(sub); console.log(789); }}</script></html>
添加回答
举报
0/150
提交
取消