前段时间因为项目上需要而写的一个JQuery的插件,用于将页面中的小图片放大为原始图片从而进行预览效果的。
这个插件就像其它所有的JQuery插件一样,本身没有多么特别吸引的地方,但如果结合我后面要写的一篇关于浏览器插件开发的文章,那我们的前端页面的展现将会妙趣横生啊!
言归正传,还是说说我这个插件是做什么的吧~~
有很多时候(我相信大家基本上都遇到过),我们看到一张小图时,需要不打开新的页面就能预览它!这时候,方式有很多:弹出新窗口、将图片用js在当前页面中放大等等。每种方式都需要根据实际的情况或需求来确定使用,没有说谁好谁不好的!我这里要介绍的就是我们需求人员要求比较“华丽”的方式,就是蒙层且操作简洁!
这种需求的提出,我第一个印象是:thickbox和相应的一些插件。于是我也去用了一下,结果我发现其实,我只用到了这些插件的一点点功能,当然这不是最让我受不了的!最让我受不了的是:这些插件每次预览时都要重新去请求一下该图片,这对于一个web项目来说,是对性能的一个损耗,因此,这是我放弃使用它们的原因,也是我重新实现现在这个插件的动力!
在实现这个插件的时候,我充分借鉴了fancybox的展现方式和操作方式!但我实现了使用“假缓存”(所谓假缓存就是:当前显示的小图片其实就是原图,只是指定长宽来限制它的显示尺寸,预览时直接将该图片原始显示即可)来减少或不对图片的重新请求,进而减少了对web服务的一点压力(因此这样的使用情形,如果一些网站用户使用预览的功能较少,那就不太适合使用了,因为加载原图会比较慢一点)!
使用这个插件的特点是:预览的图可以是当前的图,也可以是指定的图片,还可以是一段文本等任何可以显示的内容!
具体的请大家自己看文档和示例吧
分享到:
相关推荐
基于Jquery的图片预览插件,功能强大,支持图片放大缩小、循转、翻转、全屏,简单易用
基于JQUERY的,图片切换代码,带图片缩略图功能。
jQuery图片上传压缩预览代码是一款基于HTML5实现的带图片压缩显示功能代码。
主要介绍了基于jquery实现图片上传本地预览功能的相关资料,需要的朋友可以参考下
这是一款基于jQuery的图片滑块焦点图插件,这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的JavaScript功底,可以自己修改...
之前我们分享过一个基于jQuery的放大镜特效插件,可以将选中的图片区域进行放大预览。今天我们要来分享一款基于jQuery的图片放大预览插件,只需要将鼠标滑过缩略图,即可将当前区域的图片放大预览,这个功能一般在...
78. 一款实用经典jQuery图片切换展示插件下载 79. 下载jQuery动感广告图片翻转插件(PictureRoll)示例版 80. 下载JQuery淡入淡出效果插件InnerFade 81. 下载jquery走马灯效果图片连续滚动的实例 82. 几种简单...
jQuery图片放大缩小旋转预览代码是一款黑色遮罩层大图左右切换,支持旋转,放大缩小预览功能特效。
主要为大家详细介绍了基于jquery实现图片上传前本地预览功能,感兴趣的小伙伴们可以参考一下
78. 一款实用经典jQuery图片切换展示插件下载 79. 下载jQuery动感广告图片翻转插件(PictureRoll)示例版 80. 下载JQuery淡入淡出效果插件InnerFade 81. 下载jquery走马灯效果图片连续滚动的实例 82. 几种简单实用...
78. 一款实用经典jQuery图片切换展示插件下载 79. 下载jQuery动感广告图片翻转插件(PictureRoll)示例版 80. 下载JQuery淡入淡出效果插件InnerFade 81. 下载jquery走马灯效果图片连续滚动的实例 82. 几种简单实用...
基于jquery 的canvas压缩图片上传到服务器并在前端展示
一款基于EZView.js插件结合jQuery制作的点击弹出窗口放大图片和PDF文件预览插件,功能挺多的,个体看演示。
本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js jQuery调色板变换背景 jQuery调用百度地图坐标定位 jquery多功能表单验证2.0(原创) jquery仿app产品筛选列表 jquery仿...
3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析/80 3.11 本章小结/81 第4章 jQuery中的事件与应用/82 4.1 事件机制/...
7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...
jQuery图片上传压缩预览代码是一款基于HTML5实现的带图片压缩显示功能代码。