本章介绍一种常用的效果，即当鼠标滑过链接时，会出现一个随鼠标指针移动的图层。在实际应用中，通常是一些说明文字或图片的链接等。

让我们先看一个演示。

下面是代码示例：

link rel='样式表' href='./CSS/common . CSS ' type=' text/CSS '/script type=' text/JavaScript ' src=' http :/js/jquery-1 . 2 . 6 . pack . js/' script script type=' text/JavaScript ' src=' http :/js/jquery . imagepreview . 1 . 0 . js/script script type=' text/JavaScript ' $(function(){ $(' a . preview ')。预览()；});/script style type=' text/CSS ' html { overflow-y : scroll；}a.preview，a . preview : hover { text-decoration : none；}a .预览img { margin:20px 10px}/style/head dydiv class=' zxx _ out _ box ' div class=' zxx _ in _ box ' H3 class=' zxx _ title '带有放大图片的jQuery插件演示页/H3 div class=' zxx _ main _ con ' div class=' zxx _ test _ list ' a class=' preview ' href=' http://image . JB 51 . net/image/study/s/s256/1 . jpg ' title=' Baby Zhang ' img src=' http :3358 A class=' preview ' href=' http://S256/mm3 . jpg ' title='一些未知的美' img src=' http :http://A class=' preview ' href=' http://Study/s/S256/mm3 . jpg ' title='一些未知的美' img src=' http :0 你觉得我们的朋友怎么样？

接下来，让我们简单介绍一下如何使用它：

1.a标记的href属性是必需的。这个jQuery插件的原理是，当鼠标移动到缩略图(或链接文本)时，会加载一个包含href指向路径的大html片段，该片段会根据鼠标的位置进行绝对定位。因此，鼠标移动到缩略图以显示大图像。大图的地址是a标记的href属性的内容。例如：a href="xx.jpg "缩略图/a如果此a标签包含显示大图像的方法，页面将显示href指向的" xx.jpg "图片。

2.使用的方法是：目标选择器。预览()；例如，上面的a href="xx.jpg "缩略图/a可以使用$ ("a ")。预览()；这段代码实现了将鼠标移动到文本链接“缩略图”来显示这张xx.jpg的图片的效果。

3.仅支持PNG、GIF、JPG和BMP格式的图片。可以修改插件代码正则表达式扩展支持的图片格式类型。

下面简单介绍一下：的实现过程。

一、代码注释：

1.这个。截图预览=function () {}，声明了一个函数来实现如下效果。在这个效果中，这实际上可以省略，它指向window。

2.xOffset=10，它声明了一个变量来指定鼠标指针和弹出图片之间的横向距离。

3.yooffset=30，它声明了一个变量来指定鼠标指针和弹出图片之间的纵向距离。

4.$ ('a .截图')。悬停(function(e){}，function (e) {})，它指定当鼠标移动到和离开链接时要执行的功能。

5.this.t=this.title，将链接的title属性值赋给t属性，其中这是指向当前鼠标悬停的链接对象。

6.var c=(this.t！='') ?Br/' this.t : ' '，如果this.t不为空，即有标题属性值，则插入新的行字符，连接当前标题内容，否则，将c设置为空。

7.$(“body”)。追加(' p id='截图' img src=' ' this。rel''/'c'/p ')，在正文中添加图片和相关描述。

8.$ ('#截图')。CSS ('top '，(例如pagey-xoffset)' px ')。CSS ('left '，(例如pagexyoffset)' px ')。fadein ('fast ')，设置p元素的顶部和左侧属性值，采用。

9.this.title=this.t，把标题内容赋给this.title，其实没有这句话是没有问题的，有点多余。

10.$(' #截图')。移除()，移除p元素。

11.$ ('a .截图')。mousemove(函数(e) {})，用于设置鼠标指针移动时要跟随的图片。

12.$ ('#截图')。CSS ('top '，(例如pagey-xoffset)' px ')。CSS ('left '，(e. pagexyoffset)' px ')，设置p元素的上下左右属性值，可以达到如下效果。

二.相关阅读：

1.hover()函数可以引用jQuery的悬停事件部分。2.关于append()函数，请参考jQuery中append()方法一章。3.关于css()函数，请参考jQuery的CSS()方法部分。4.pageY属性可以参考jQuery的event.pageY属性部分。5.可以在jQuery的fadeIn()方法部分找到fadein()函数。6.关于remove()函数，请参考jQuery的remove()方法部分。7.mousemove事件可以在jQuery的mousemove事件部分找到。