2012-02
28

第一次写jQuery实现图片缩放

By xrspook @ 16:28:35 归类于: 烂日记

很低调地基本完成了http://adelrio.diandian.com/模板的改造。为什么说基本?因为还有一些缩进、颜色等细微CSS东西没有完成。

高中的数学老师龙哥说过,学数学有几个境界——不懂不会,会而不对,对而不全,全而不好。其实这又哪只是数学的境界,这是做人的境界!可以不马虎的,我不想马虎对待。

昨天东拼西凑,找到了能用在网页上对图片拉伸js,但今天发现各种不妥,最终,经过琢磨和修改,我第一次写出了自己的jQuery。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery("a.fix-img-onload img").each(function(i,item){
	var img=jQuery(item),w_img=img.width(),h_img=img.height(),w_new,h_new,h_new2,l_m;
	h_new=310;
	w_new=310/h_img*w_img;
	if(w_new<305){
		w_new=305;
		h_new2=305/w_img*h_img;
		l_m=(310-h_new2)/2;
		img.css({"width":w_new+"px","height":h_new2+"px","margin-top":l_m+"px"});
	}
	else{
		l_m=(305-w_new)/2;
		img.css({"width":w_new+"px","height":h_new+"px","margin-left":l_m+"px"});
	}
});

原理是这样的,这个操作针对于a下面“class=fix-img-onload”的“img”。我的目标是让图片在一个305*310px的框架内显示,缩放到框架大小,但不失真。思路是固定高或固定宽,然后计算出宽或高,如果多出来的是宽,那么利用margin-left控制其水平居中,如果多出来的是高,按么利用margin-top控制其垂直居中。margin控制也就是一个利用负数的定位了。

代码我是先把高默认设置为305px,然后计算宽,如果宽小于310px,那么重新设置宽为310px,再计算高。为什么要这样呢?没有那句if…else…,即不考虑如果计算的宽小于310px可以么?可以,但如果遇到又窄又长的图片你就会看到图片居中,但两旁有空位。如果你能忍受,这完全没有问题。

这不是高深到活儿,相册的预览很久很久以前就已经在实现这种功能了,不过我这里的意图刚好跟它们相反,它们把大尺寸设为固定尺寸然后缩放,我是固定小尺寸然后缩放并隐藏。

很多东西我都不懂,我喜欢去学,愿意去学,且可以学会,无论过程还是结果都让人很窝心,因为貌似极少是没有达到我预期目标的。

谢谢点点的Lei,如果不是他的这段话

这个你就需要写JS来实现了。将图片放在305x310px的容器中,超出范围就隐藏,然后按照固定的长宽比进行拉伸。

我不会去琢磨改进别人的东西,如果他直接给我一段代码,那么这些东西我就不可能自己真的动脑筋去想了。

人生最重要的是,要拥有跟随内心与直觉的勇气——应该可以称呼为Lei的格言吧

反正我是非常认同的。

至今我都狠狠地赏了那些没看出我毅力和天赋的人巴掌,哇咔咔~~~

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

COPYRIGHT @ 我的天 | Theme by xrspook | Power by WordPress | Valid XHTML 1.1 and CSS 3 Go to top