写了一个jQuery.imagesview插件,支持图片拖动、缩放类似ACDSEE效果

2021年1月13日   |   by tgcode

做项目的时候客户总是比较关心前台界面,这不最近又遇到一个难缠的客户。要求在前台的缩略图点开后查看高分辨率的图片,并且最好能像ACDSEE那样方便浏览,支持拖动、按比例放大缩小。

这样的效果记得在SINA的某个栏目看到过,影响中好像是FLASH做的,我很多年没碰过FLASH了,对现在的ACTION脚本不是很熟悉,于是想到结合JQUERY来实现,JQUERY的ThickBox支tgcode持图片浏览但不tgcode是客户要的效果,在GOOGLE搜索了半天没找到一个好用的JS代码,只好自己来写了。

先看效果(点下面的图片和连接即可

//


%title插图%num

同样支持文字连接

支持 IE 7+、FireFox 1.5+ (PC, Mac)、Safari2+、Opera9+、Chrome0.3+

   我测试了一下应该在 谷歌浏览器、IE7、FIREFOX3.0 下都能看到效果的,呵。。

   为了给大家展示这个效果可费了我不少时间,主要是这个博客不支持在内容里定义CSS样式文件。

而且CNBLOGS后台编辑对 Chrome 支持不是很好,只好开N个浏览器来回折腾~~

   看不到效果的只好看下面这张图了:

%title插图%num  

相关文件(文章最后的附件中都有这些文件):

————————————————————————————————  imagesview.css   –样式文件

   imagesview.js   –ImageView JS文件 tgcode

   toolsico.gif      –按钮图标

   loadingAnimation.gif  –加载动画

   jquery.js      –JQUERY脚本库,请使用jQuery 1.2.6 以上版,否则拖动有点问题

   使用方法:

—————————————————————————————–

   页面头部引用imagesview.css、imagesview.js、jquery.js即可(两个GIF图片文件和CSS文件放在同一目录)

   图片连接:%title插图%num

   文字连接:同样支持文字连接

   其中class=”imagesview” 是必须的,title=”。。” 这里是标题,可以不定义。

   所有相关文件附件中提供下载:

附件: jquery.imagesview.rar

相关推荐: 怎样打造一个酷网站?

  如果你是一个互联网创业者或者产品经理,你大概像这个行业里的每个人一样,梦想建造出这个世界的下一个Google或者Facebook. 你需要每天作出各种各样的决定,而你作出的这些决定往往决定着产品的成败,这里是一些经验原则,你也许会它们能够帮助你清晰地思考,…

Tags: , , ,