基于JQuery的一个图片预览功能

      前段时间因为项目上需要而写的一个JQuery的插件,用于将页面中的小图片放大为原始图片从而进行预览效果的。

这个插件就像其它所有的JQuery插件一样,本身没有多么特别吸引的地方,但如果结合我后面要写的一篇关于浏览器插件开发的文章,那我们的前端页面的展现将会妙趣横生啊!

      言归正传,还是说说我这个插件是做什么的吧~~

      有很多时候(我相信大家基本上都遇到过),我们看到一张小图时,需要不打开新的页面就能预览它!这时候,方式有很多:弹出新窗口、将图片用js在当前页面中放大等等。每种方式都需要根据实际的情况或需求来确定使用,没有说谁好谁不好的!我这里要介绍的就是我们需求人员要求比较“华丽”的方式,就是蒙层且操作简洁!
这种需求的提出,我第一个印象是:thickbox和相应的一些插件。于是我也去用了一下,结果我发现其实,我只用到了这些插件的一点点功能,当然这不是最让我受不了的!最让我受不了的是:这些插件每次预览时都要重新去请求一下该图片,这对于一个web项目来说,是对性能的一个损耗,因此,这是我放弃使用它们的原因,也是我重新实现现在这个插件的动力!
在实现这个插件的时候,我充分借鉴了fancybox的展现方式和操作方式!但我实现了使用“假缓存”(所谓假缓存就是:当前显示的小图片其实就是原图,只是指定长宽来限制它的显示尺寸,预览时直接将该图片原始显示即可)来减少或不对图片的重新请求,进而减少了对web服务的一点压力(因此这样的使用情形,如果一些网站用户使用预览的功能较少,那就不太适合使用了,因为加载原图会比较慢一点)!
使用这个插件的特点是:预览的图可以是当前的图,也可以是指定的图片,还可以是一段文本等任何可以显示的内容!

      具体的请大家自己看文档和示例吧

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值