by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=281

今天看完了《JavaScript语言精粹》这本书，还有时间，就决定写写jQuery插件练练手，实现的效果是，鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。

参见下面的截图：

使用方法简要说明：

1. 需要借助<a>标签的href属性，此jQuery插件的原理是当鼠标移至缩略图（或链接文字时），会加载一段含有href指向路径的大图HTML片段，该片段根据鼠标的位置绝对定位。于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是<a>标签的href属性的内容。例如：

   <a href="xx.jpg">缩略图</a>

   如果此<a>标签含有显示大图的方法，则页面就会显示href所指向的"xx.jpg"这个图片。

2. 使用的语法：

   $().preview()

   例如上面的：

   <a href="xx.jpg">缩略图</a>

   就可以使用$("a").preview()这段代码实现鼠标移到“缩略图”这个文字链接上显示xx.jpg这张图片的效果。

3. 仅支持png,gif,jpg,bmp四种格式的图片，您可以修改插件代码的正则表达式扩展支持的图片格式类型。

这里是：demo实例页面 | 源文件下载

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=281