网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：18345199。[点此获取更多QQ群]
我们先看一下效果：
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。
代码如下：
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。
代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>图片提示效果</title><script type="text/javascript" src="jquery1.3.2.js"></script><style type="text/css">body{margin:0 ;padding:40px;line-height:180%;}img{border:none;}ul,li{margin:0 ;padding:0;}li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}/*tooltip*/#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}</style><script type="text/javascript">$(function(){var x = 10;var y = 20;$("a.tooltip").mouseover(function(e){this.myTitle = this.title;this.title = "";var imgTitle = this.myTitle?"<br>"+ this.myTitle : "";var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素$("body").append(tooltip); //把它追加到文档中$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).fadeIn(600); //设置x坐标和y坐标，并且显示}).mouseout(function(){this.title = this.myTitle;$("#tooltip").remove(); //移除}).mousemove(function(e){$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});});})</script></head><body><h3>效果</h3><ul><li><a class="tooltip" title="苹果 iPod" href="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" alt="苹果 iPod"></a></li><li><a class="tooltip" title="苹果 iPod nano" href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" alt="苹果 iPod nano"></a></li><li><a class="tooltip" title="苹果 iPone" href="/jscss/demoimg/wall3.jpg"><img src="/jscss/demoimg/wall_s3.jpg" alt="苹果 iPone"></a></li><li><a class="tooltip" title="苹果 Mac" href="/jscss/demoimg/wall4.jpg"><img src="/jscss/demoimg/wall_s4.jpg" alt="苹果 Mac"></a></li></ul></body></html>
