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的格言吧

反正我是非常认同的。

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

2012-02
23

狠狠地去干

By xrspook @ 18:46:35 归类于: 烂日记

无论干什么,不要吊儿郎当,要不不干,要干就要干到最好,发狠地干,死命地去搞!

一大早被告知今天要做脂肪酸,做就做呗。早上9点半开始,一去到检验室我已经发现某人遇到问题,砻谷机卡了,正在打开机头。检查后发现是连接机头的原装橙色皮带因为长时间没用发硬了。发硬的皮带根本无法带动机头。有人说用火去烧,结果是自己的手烧了,但皮带还是老样子。换呗,换的时候发现只有老的橙色皮带,是软一点,但换上去没两下又断了。无奈之下只好不用机头的自动喂料功能,其实那个机头和皮带纯粹就是完成一个比较弱智的喂料功能,手工进料也是可以的,只要控制好速度。一开始,很容易就卡,后来把托辊皮带张紧后再也没卡过。于是,稻谷脂肪酸的第一步碾米算是基本上路。在这过程中,我们还试图搬出备用的第二台砻谷机,同样的2,一开机,光听声音就知道2。我在折腾上面说的那台,某人在折腾另外一台,某人未果。我砻谷完成,也磨完粉后去料理某人觉得无药可救的那台。主皮带是橙色原装货,不单硬了,而且还拉长到一个令人无法忍受的地步,试问这样的皮带怎么可能把机械带动起来!把橙色的换成黑色的备用皮带且张紧,这小东西甚至比我之前手工喂料的那台还要棒!我妈说我很粗鲁,不够细心,跟她老人家比起来,有时我的确那样,因为她老人家做了一辈子的车工了,但不得不说,从小只有破坏没有建设的我在这方面或许有点遗传的小聪明,又或者说,某些情况下,我的经验相比于某人的单纯不淡定靠谱。

好吧,然后是稻谷脂肪酸滴定。磨粉完毕已经是10点半有多。一直告诉我最多磨3个,因为他好久没有滴了,心里没有底,但我偏要5个都磨了,我不能容忍工作硬是要拖到上午一半下午一半。

你要称多少个,要滴多少个都无所谓,见过大场面的不会被你的三平行四平行吓倒。最后,做了4个三平行3个四平行。

今天犹如上身了似的,使用移液管不知为何可以如此精准,移液不下20次,只有2次是放过头的,这对我来说堪称奇迹。这是不是跟我这段时间一直在用右手练吉他指法所以更灵活了有关呢?

其实,稻谷脂肪酸某人最想逃避的是前处理和后续的洗涤,这是懒人的经典思维。所以我就从没奢望过那一大推玻璃货不是我洗的。当某人说那堆东西放着,先去吃饭,以后慢慢洗的时候,我就当我没听过一样。首先,我不会把东西洗一半然后放着,因为那明明是可以干完的,问题只是你有没有要继续洗完的决心;然后,我从来没考虑过某人会爽快地加入洗涤这个行列。这样说吧,如果你当时是抱有为啥都是我洗的心态去做的话,你会疯掉的,多年以来已经练就了我目空那个事实。发狠地洗就好。

洗完东西,12点半(12点下班开饭),碰运气去饭堂,我已经做好没饭吃的心理准备了,但居然还有得吃。我不想连累饭堂洗盘子的人,所以我狠命地把食物往嘴里塞。

下午,这个下午的空闲是我狠命赚回来的,心安理得。

于是我用来改进http://adelrio.diandian.com/

完整截图在这里

对网站进行了微调,主要目标是调节网页,使之在17寸方屏显示器(分辨率1280*1024)标准浏览器配置下不出现滚动条,Firebug计算出来,整个网页body的高度为874px。这个高度远远小于1024,但你要知道哦,你的显示器通常还有默认的一行底层导航栏,浏览器里有各种东西,比如说状态栏、菜单栏什么的。现在每个“小方格”的高度为310px,曾改为320px,320在Firefox、Opera和Chrome都表现良好,但在IE7居然有我讨厌的滚动条,我只好再缩10px。(注:未修改之前“小方格”的高度为380px)IE的问题是人神共愤的,各种奇怪的margin,各种奇怪的字体大小。

在“小方格”里可以显示视频的缩略图,但视频缩略图通常都很模糊,所以这次我在这种“小方格”里加入了“三角播放符号”,那么地球人都会知道这是视频了。

对“文字”和“视频”小方格的鼠标移入显示内容作了调整,从前用的是描述/标题,现在用的是两句话,嘿嘿嘿,你懂的,到网站浏览一下你就明白鸟,奸笑中~~~

如果不是有上午的体力“劳动改造”我不会主动下午来个脑力“劳动改造”。

狠狠地,人生很短的啊,能让你挥霍,你发狠得起来,且有机会狠的机会不多,要抓紧。

2012-02
8

计划外有惊喜

By xrspook @ 17:26:02 归类于: 烂日记

昨天起床木有难度,但今天起床有一点点难度,看来,晚上11点前上床睡觉还是很有必要的。但现在晚上该如何分配时间是个难题,碰上RS的第三第四课,一周4个晚上,必须挑2个晚上出来加码,加码的总时间或许得有4小时。吉他需要每天练习,练习时间不少于1小时。每周都有一次Raw,每月都有两次PPV,除了边看摔角边吉他没有它法了。比如说今天晚上,我就打算吃过饭马上RS,要完成第四课的核心课程到写作,估计这得大概2小时(6点半-8点半)。然后去洗澡,回来之后看上周忘记看的NXT和吉他练习(9点-11点),11点之前回去睡觉。所以,我这样的生活没有孤单的份啦!

今天运气挺好的。

早上下了个Dropbox 1.3.14测试版,用来骗空间。其实嘛,也不能说骗,人家论坛光明正大地邀请大家去测试的,我不测试,不赚空间是不是很傻呢!手头上的工具只有相机能实现那个功能,而我相机的内存卡又只有1GB,所以嘛,这有点麻烦。但最麻烦的还不是内存卡,是电池!非常不给力的1300毫安5号电池已经远远不能满足我的需要了!!!!最简单的方法是开着相机录制视频,但由于电池不给力的关系,我的内存卡明明能录制8分钟达到1GB,现在只能录制4分钟不到,甚至1分钟不到,就自动关机。我非常迫切升级我的电池装备!!!!如果我真的要继续用5号电池玩相机的话!!!!但即便困难重重,我还是刷了1.5GB的空间,真的不容易啊~~~(插一句,必须安装测试版客户端,然后用弹出窗口的Dropbox上传功能,单纯把图片拷到相应文件夹是无法骗空间的)

下午做了2011职称英语考试综合A的题目,除了最后15道完形填空因为网络的各个版本都非常不给力没办法做以外,其它50道题,85分,我只错了3道,扣了9分。兴奋!最兴奋的是这次补全短文我做全对了,内牛满面~~~ 等周末回家纸质到手就能把最后这道大题也了结了。今天的阅读理解,我终于感到有点带劲了,知道自己到底在干什么。

然后呢,Tumblr上有人发截图,我马上意识到这是怎么回事了!那个传说中的Alberto Del Rio WWE YouTube豪车网络短剧有了!马上下载,马上围脖,马上115,马上点点,马上土豆,!!!!1个多月了!1个多月我们没有见Berto的新视频了,泪奔~~~ 大概这就叫厚积薄发吧,所以今天一有机会我就彻底爆发了。

生活没有追求活不下去,但如果并行的任务太多,小心被压垮。我相信,现在这个状态我能hold住。

PS:申请的招行VISA也已经通过审核,这两天就挂号信发出了!

2012-01
12

前进中的gif

By xrspook @ 17:01:16 归类于: 烂日记

还记得很久以前对那些会动的图兴奋不已,然后不知道从什么时候开始,我也开始学做gif了。当时只是做简单的文字变换,从来没考虑过大小,只是在颜色和变化效果上做文章。作为blog的一个图片链接出现,推广自己的“领地”。

慢慢地,gif退出了我的生活。

但自从我开始看摔,看到那些摔角的gif后,我又开始做gif了!比赛需要用视频,但动作,gif就好!怎么做呢?幸好,几乎是同期,我认识了KMP播放器,它的高级捕捉功能让我能轻易地获取到源图片。那到底要做多大呢?一直以来,没有人给过我确切的答案,但后来我才知道原来gif的大小是受制于文件大小的,很多地方,gif超过某个文件大小限制就不会动,或者动着动着就卡死了。这就是gif,gif不是视频,你不能在这么短的哑巴时间里表现太多东西,虽然,关于哑巴这个问题,你是完全可以做字幕进去的。

从来没见识过500*281,这个足足视频大小的gif,而且还那么唯美,第一眼看到的时候就着迷了,我确信我也要做!图片光会动还不够啊,要漂亮!一个个色块,到处都是瑕疵这怎么能行?!这就意味着做gif的技术需要升级。入门是快乐的,升级也是快乐的,因为有追求,我们才乐此不疲地不断向前奔跑。跟入门一样,该用什么软件?该用什么方法?

我们生来不强大,但通过后天的学习我们可以变得越发强大。

因为,最好的老师是我们自己那颗永不停息探索的心!

2012-01
11

gif消磨度日

By xrspook @ 17:33:41 归类于: 烂日记

日子很无聊,我都在没事找事干了。

昨天做了一批Ricardo Rodriguez的gif,一共8个。这还是我第一次在一个晚上做那么多的gif。而且,这些gif基本上都不只是纯粹截图缩放,而是经过批量定位剪裁的,这就意味着各种试验。而且,这些我都打算放到Tumblr,所以,必须的全部小于500KB,所以,这又意味着各种删减帧数和缩放试验。

这里就随意放出4个,要看全部的请移步


昨天刻好的DCJM在第一次水洗后眼睛和鼻子连接处就断开了,我不应该拿去洗,但我有洁癖,我无法忍受上面有颜料。如果天气不是这么冷,丙烯没有那么容易干掉,也不会粘在胶片上去不去,我也不用胡乱使劲。所以,昨天下午我就又开始着手修改CorelDraw原图,在原图上就强化好各个敏感部位。昨天晚上描线,今天早上,第二版出来了!

冥冥中,这个作品是必须有2个的,因为2个才能称作“DOS”+“CARAS”(“two”+“faces”),destiny,真的!

上午的无聊被雕刻活赶走了,下午继续无聊,做gif呗。上上周在WWE的U2那里下了个720P的NXT,50多分钟1.3GB啊!我就是为了剪切的,因为我知道那里总能剪到我喜欢的片段。不出所料了!我剪出了4个好东西:一、SD party;二、WWE PPV RR 2011广告;三、pro和rookie问答题;四、Ricardo用芝士引诱Conor上钩。每一处如果要斟酌的话都能做出好几个漂亮的gif。不喜欢2011年Royal Rumble本身,却很喜欢2011年Royal Rumble的广告,快速变化的头像正好反映出RR的核心——人多。于是,又做了3个gif。

这里放出2个,第三个么,2012年一月的某期“每日GIF”我会放出的。


不做不知道,一做吓一跳,如果用720P的视频源,即1280*720缩放到500*281做gif的话,我用的软件是Ulead GIF Animator,不用Line Art 256优化的话,最多最多就做8帧,超过8帧就会大于500KB了。即便用了Line Art 256,10帧也是个极限!所以我真的很佩服Tumblr上我看到的某人居然可以做小于500KB 12帧的500*281,匪夷所思!当然了,这跟图有关,如果图里的东西只是小范围变动的话,gif是可以小一点的。所以,选择什么样的视频点做gif也是个学问,如果你是要做唯美gif的话。如果你要做的是动作gif,那就没啥好说的了,要不照顾质量,让gif超过500KB,要不压缩比例,宽做到200px以下,又或者,如果可以的话批量裁剪原图大小。

等过年,天天在耗时间,这很囧的啊~~~

© 2004 - 2026 我的天 | Theme by xrspook | Power by WordPress