如何实现鼠标放上链接图片预览功能

近日，一款zhiphp后台图片预览功能，觉得挺不错的，仔细看看原来是使用的一款JQuery插件。分享给大家：

1.引用插件。

<script src="{yourbaseurl}/js/jquery.imgpreview.js" language="JavaScript"></script>

 例如引入官方远程JS文件和google jquery库。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://james.padolsey.com/demos/imgPreview/full/imgpreview.full.jquery.js"></script>

 接下来就是使用插件了，是不是很简单

<script type="text/javascript">
    $(document).ready(function(){
        var obj=$("#imgPreview a[rel]");
        if(obj.length>0) {
            $('#imgPreview a[rel]').imgPreview({
                srcAttr: 'rel',
                imgCSS: { width: 200 }
            });
        }
    });
</script>

 

其中 imgPreview 是一组图片容器的id，当然可以是table、 div 等等。

需要注意的准备工作就是，在容器内，需要有预览效果的 a 链接上，要增加一个 rel 属性，rel 的值为图片路径。

拓展一下：经过一翻搜索，我发现这个功能不仅如此，还能做的更好，可以为预览图片添加各种样式，如边框、文字说明等等。。。

查看详细内容请移步 ：http://james.padolsey.com/demos/imgPreview/full/