很低调地基本完成了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"});
}
}); |
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的格言吧
反正我是非常认同的。
至今我都狠狠地赏了那些没看出我毅力和天赋的人巴掌，哇咔咔～～～
