Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

1,710

图片的自动缩放(兼容IE及Firefox)

  • 2013-04-20
  • 暂无评论

在一些相册中通常都需要用到这个功能

通过我的观察各大网站都用到了不同的方法:

1.通过上传时候的制作缩略图,来控制图片的高度和宽度;如果页面显示尺寸进行变更就会遇到大麻烦

2.通过FLASH展示,flash中相关的功能;需要一定的flash功底,传输量大,需要用户安装FLASH(当然这已经不是什么问题了)

有没有什么一劳永逸的办法呢?直接通过HTML+CSS实现?

主要的问题就出在IE6~7版本的浏览器上,支持标准CSS的浏览器可以通过CSS中的max-height及max-width的2个属性很容易的实现该功能

那我们就专注与IE上的处理吧!~

首先通过查询IE有自己的expression(在IE8已经开始不支持了,但不影响我们,因为我们只要IE6~7中产生效果)

_height: expression(Math.min(85,this.height)+"px");_width:expression(Math.min(85,this.width)+"px");

好,功能已经实现,IE7中展示完美!但IE6中多列上的图片有问题,有的高不对,有的宽不对(大概是IE中等比例缩放不能同时定义height及width)

这时我们只要通过一定的判断就可以让代码自动判断,根据不同的要求用不一样的代码,一般是3种效果

1.同宽高:zoom:expression(function(e){if(e.height>e.width){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}}(this));

只需要判断高和宽的大小就可以了

2.最大宽度固定,高度自定:zoom:expression(function(e){if(e.width > 85){e.style.width= Math.min(85,e.width)+"px";}}(this));

只需要判断宽度是否超出规定大小(同理最大高度固定,宽度自定,情况比较少)

3.最大宽度和高度都固定:zoom:expression(function(e){if(e.height/85>e.width/85){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}}(this));

判断下高度比和宽度比之间的大小,大的那个进行处理就可以了

这里为什么选择通过zoom来进行处理呢?因为涉及到另一个问题:效率,expression用的为什么少,因为它是不断的进行计算的,那样对浏览器的负担很大,如果显示的地方很多甚至会出现死机的情况。

这么致命的问题,如何解决呢?通过网上的查找发现了个重定的方法,就是将被定义expression的属性在计算的最后重新定义

zoom:express(this.style.zoom = '1';);这样这个效果就只会被触发一次就停止了。记住不能用hack方式书写,无效!

那上面我们就可以这样写

zoom:expression(function(e){if(e.height>e.width){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}e.style.zoom = 1;}(this));

那样负担就小多了,而且不会因为被重定义就对多个调用的地方显示同样的效果,应该是CSS应用的一个方式,本人对这些比较细致的问题没什么研究,效果达到也就可以了。

这样的代码就不是符合标准的了,用的人可要注意了!~

本人还是比较热衷与FLASH,因为可以在一个元素里面把效果全部都定义进去什么左翻,右翻等等,但不会,只好先研究出最直接的方法,日后有机会再尝试flash的!~

注:实际过程中IE6中又遇到了个问题,在图片加载中样式就直接处理了,那图片就会很小

首先经过测试,在IE下图片读取完之前不能修改height及width的值,否则就会变样,那这时可以先判断是否大于所需的宽度或高度后再进行赋值

然后在判断是否加载完毕:if(e.readyState == "complete"){},将上述内容添加进去,则可以实现,因为expression本身的特性会不断执行,所以这里不需要写定时器!

但在现在的情况下因为图片在加载过程中没有设定宽度和高度,当比当前所需大时会撑开页面,当然通过overflow:hidden;但如果不能写的时候

可以把if(e.readyState == "complete"){}只包住e.style.zoom = '1';那样可以不断判断

上面的就可以修改成:

zoom:expression(function(e){if(e.height/350>e.width/600){e.style.height = Math.min(350,e.height)+"px";}else{if(e.width > 600 ){ee.style.width= Math.min(600,e.width)+"px";}if(e.readyState == "complete"){e.style.zoom = 1;}}(this));

内部的缩略宽高按实际需求进行修改即可



back up ↑

无觅相关文章插件,快速提升流量