Jquery实现的图片预览插件(imgPpreview)完整实例_图片预览插件,jquery图片预览组件资源-CSDN文库

共4个文件

js：3个

html：1个

3星 · 超过75%的资源需积分: 50 92 浏览量 2009-06-10 00:03:55 上传评论 1 收藏 22KB RAR 举报

**jQuery实现的图片预览插件(imgPreview)详解** 在Web开发中，用户在上传或浏览图片时，能够实时预览图片是一项非常重要的功能。jQuery的imgPreview插件提供了一个简单且高效的解决方案，使得开发者可以轻松地在网页上实现图片预览效果。本篇文章将深入探讨imgPreview插件的原理、使用方法以及常见应用场景。 ### imgPreview插件概述 imgPreview插件是基于JavaScript库jQuery的一款轻量级图片预览工具，主要功能是在鼠标悬停在图片链接上时，快速显示一个小窗口预览图片。它依赖于jQuery 1.3.2版本，并且提供了imgpreview.0.22.js这个核心脚本来实现预览功能。 ### 安装与引入确保在项目中已经引入了jQuery库。接着，将imgpreview.0.22.js文件下载并放置到项目的JS目录下。在HTML文件中，通过`<script>`标签引入jQuery和imgPreview插件的JS文件，如下所示： ```html <script src="path/to/jquery-1.3.2.min.js"></script> <script src="path/to/imgpreview.0.22.js"></script> ``` ### 使用方法 imgPreview插件的使用非常简单，只需要几行代码就可以实现图片预览。以下是一个基本的使用示例： ```javascript $(document).ready(function() { $('img[rel=imgPreview]').imgPreview(); }); ``` 这段代码会在文档加载完成后，对所有`rel`属性值为`imgPreview`的`<img>`标签应用预览功能。 ### 参数配置 imgPreview插件还支持自定义配置，以满足不同场景的需求。以下是一些常见的配置选项： - `width` 和 `height`：预览窗口的宽高，默认自动调整。 - `offsetX` 和 `offsetY`：预览窗口相对于鼠标位置的偏移量。 - `divId`：自定义预览窗口的ID，若不设置则默认生成一个。 - `inplace`: 是否启用原地预览模式，即在图片本身位置预览，而非跟随鼠标移动。例如，以下代码将创建一个宽度为200像素，高度为200像素的预览窗口，并设置偏移量： ```javascript $('img[rel=imgPreview]').imgPreview({ width: 200, height: 200, offsetX: 10, offsetY: 10 }); ``` ### 应用场景 1. **图片上传预览**：在用户选择图片后，提供即时的预览效果，提升用户体验。 2. **相册展示**：当鼠标悬停在缩略图上时，显示大图预览，无需跳转或点击。 3. **商品详情页**：在查看商品图片时，用户可以快速预览各个角度的图片。 ### 实例分析在提供的压缩包文件中，包含了一个名为`imgPreview`的文件，这很可能是imgPreview插件的一个示例或者源码。为了更好地理解和使用该插件，你可以打开这个文件，查看其内部结构和代码，进一步学习如何定制和扩展插件功能。总结，jQuery的imgPreview插件提供了一种方便快捷的方式来实现图片预览功能，其易于集成、配置灵活的特点使得它在各种Web项目中都能发挥重要作用。通过深入理解其工作原理和配置选项，开发者可以更高效地利用这个插件来优化用户的图片浏览体验。

资源推荐

资源详情

资源评论

收起资源包目录

imgPreview.rar （4个子文件）

imgPreview

jquery-1.3.2.js 56KB

imgpreview.full.0.22.jquery.js 4KB

imgpreview.0.22.js 1KB

index.html 5KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="imgpreview.0.22.js" type="text/javascript"></script> <style> #imgPreviewWithStyles, #imgPreviewWithStyles2, #imgPreviewWithStyles3 { background: #222; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 15px; z-index: 999; border: none; } /* Text below image */ #imgPreviewWithStyles span, #imgPreviewWithStyles2 span, #imgPreviewWithStyles3 span { color: white; text-align: center; display: block; padding: 10px 0 3px 0; } .loading { height: 32px;width: 32px;} </style> </head> <body> <ul id="first"> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li> </ul> <ul id="second"> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li> </ul> <ul id="third"> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li> </ul> <ul id="fourth"> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li> <li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li> </ul> <ul id="fifth"> <li><a href="http://google.com" rel="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">Google</a></li> <li><a href="http://yahoo.com" rel="http://cn.yimg.com/i/onesearch/1210/oms_001.gif">Yahoo</a></li> </ul> 本测试页面由 <a href="http://blog.csdn.net/xxd851116">笑的自然</a> 最后编辑 <a href="http://blog.csdn.net/xxd851116">http://blog.csdn.net/xxd851116</a> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $('ul#first a').imgPreview(); $('ul#second a').imgPreview({ imgCSS: { width: 200 } }); $('ul#third a').imgPreview({ containerID: 'imgPreviewWithStyles', imgCSS: { // Limit preview size: height: 200 }, // When container is shown: onShow: function(link){ // Animate link: $(link).stop().animate({opacity:0.4}); // Reset image: $('img', this).css({opacity:0}); }, // When image has loaded: onLoad: function(){ // Animate image $(this).animate({opacity:1}, 300); }, // When container hides: onHide: function(link){ // Animate link: $(link).stop().animate({opacity:1}); } }); $('ul#fourth a').imgPreview({ containerID: 'imgPreviewWithStyles2', imgCSS: { // Limit preview size: height: 200 }, // When container is shown: onShow: function(link){ $('<span>' + $(link).text() + '</span>').appendTo(this); }, // When container hides: onHide: function(link){ $('span', this).remove(); } }); $('ul#fifth a').imgPreview({ containerID: 'imgPreviewWithStyles3', srcAttr: 'rel', imgCSS: { // Limit preview size: //height: 200, width: 300 }, // When container is shown: onShow: function(link){ $('<span>' + link.href + '</span>').appendTo(this); }, // When container hides: onHide: function(link){ $('span', this).remove(); } }); }); //]]> </script> </body> </html>

评论收藏

内容反馈