鼠标放在图片上显示大图

发表于2013-04-10 20:11:31来源于创想网页设计工作室

网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：326338868。[点此获取更多QQ群]

我们先看一下效果：

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用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>