首先需要引入jQuery
<script type="text/javascript" src="js/jquery.js"></script>
使用到的CSS样式
.show_tooltip li { list-style:none; display:inline; padding:5px 5px 5px 5px;}/* tooltip */#tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:3px 3px 3px 3px; color:#333; display:none;}用到的JavaScript：
<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" ??}).show("fast"); ??//设置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>调用实例：
<ul class="show_tooltip"> ?<li><a href="image/slide1.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide1.png" width="150" alt="化无语 战场原黑仪"></a></li> ?<li><a href="image/slide2.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide2.png" alt="化无语 战场原黑仪" width="150"></a></li> ?<li><a href="image/slide3.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide3.png" width="150" alt="化无语 战场原黑仪"></a></li></ul>
效果图：
jQuery鼠标移到小图显示大图效果
原文地址：http://www.cnblogs.com/xynetstudio/p/7859259.html