共享社区

不知道大家有没有见过Yupoo照片列表里面的效果，当鼠标经过照片时会出现一个小图标，点击小图标时，就可以直接查看大图，它使用了Lightwindow这个JS.
像这种方式的体现有一个很大的好处就是用户可以点击图片的其它区域进入详细页面，也可以点击小图标，直接查看完整的图片。用户体验有有很大的提高。因为很多情况下，列表中的图片可能会引起用户想看看完整图片，或者说大图片的欲望，如果有这样的一个功能，哪就可以不影响现有功能情况下满足用户的这个“欲望”。

今天我也弄了一个类似的功能，实现方式基本跟Yupoo的一样，再把它弄也了jQuery插件，方便使用。


Yupoo的效果图：
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]

我这个的效果：
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]

调用的时候只用这样一段代码：
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]$("body").ready(function()
{
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]    /**//*
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]        there is the jImageLink code
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]    */
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]    $("a.imgLink").jImageLink(
{       
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]        iconClassName : "linkIcon",        /**//* 在这里写“小图标”的样式，包括图片 */
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]        iconRel : "shadowbox",            /**//* 这里是Shadownbox 或 Lightwindow 这类JS用的 rel 属性定义,用过的朋友一定知道 */
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]        iconWidth : 14,                    /**//* 图标宽度 这里会影响小图标的位置，建议输入跟 iconClassName 这个样式里面的图标大小一样 */
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]        iconHeight : 14
/**//* 图标高度 */
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]    });   
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]
[img]mhtml:file://E:\个人文件\程序备份\！！老猫代码！！\js\JQuery插件\jQuery插件 jImageLink_js - 模拟yupoo的缩略图上的小图标效果 - 李华顺的博客 - 博客园.mht![/img]});               



当然这个也是开源的，最近自已网站的服务器过期了，所以现在东西都向GooglePage上面发。
源代码打包下载地址：
http://jquery.jimagelink.googlepages.com/jQuery.jImageLink.zip

下面是jQuery.jImageLink的演示地址：
http://jquery.jimagelink.googlepages.com/index.html



原文出处：http://www.cnblogs.com/huacn/