上QQ阅读APP看书，第一时间看更新
3.11 实战1：网页中的图片预览
为了让项目中的页面更漂亮，经常会使用图片，而图片经常需要实现预览效果。
具体要求：将鼠标移动到图片上，将在该图片的右下角出现一张与之相对应的大图片，以达到图片预览的效果。设计一个包含4张图片对象的页面picture_CTP.html，代码如下：
<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>
在上述代码中，用超级链接标签包含4张图片。
设置列表和图片的相关样式，以达到预期的排列顺序，具体代码如下：
ul, li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
img{border:none;
}
编写jQuery代码，实现图片预览功能，具体代码如下：
01 $(function(){
02 var x = 10;
03 var y = 20;
04 $("a.tooltip").mouseover(function(e){
05 this.myTitle = this.title;
06 this.title = "";
07 var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
08 //创建div元素
09 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='
产品预览图’/>"+imgTitle+"<\/div>";
10 $("body").append(tooltip); //把它追加到文档中
11 $("#tooltip")
12 .css({
13 "top": (e.pageY+y) + "px",
14 "left": (e.pageX+x) + "px"
15 }).show("fast"); //设置x坐标和y坐标，并且显示
16 }).mouseout(function(){
17 this.title = this.myTitle;
18 $("#tooltip").remove(); //移除
19 }).mousemove(function(e){
20 $("#tooltip")
21 .css({
22 "top": (e.pageY+y) + "px",
23 "left": (e.pageX+x) + "px"
24 });
25 });
26 })
在上述代码中，第4～15行设置鼠标滑入图片时的处理方法。其中，第9行创建一个包含大图片的提示框（<div>标签元素对象），第10行将所创建的提示框对象追加到文档中，剩下的代码主要用来设置x和y坐标，使得提示框显示在鼠标旁边。第16～18行设置鼠标滑出图片时的处理方法，主要是移除提示框。第19～25行设置鼠标在图片上移动时的处理方法，即通过css()方法设置提示效果的坐标，以达到提示跟随鼠标一起移动的效果。
在浏览器中运行页面，效果如图3.15所示。当鼠标滑过小图片时，快速出现图片的预览提示效果，效果如图3.16所示；当鼠标离开小图片时，图片预览提示效果消失。
图3.15 浏览页面
图3.16 鼠标滑入图片时的效果