2012-12
22

MAP OF DESTINY滚动条改造成功

By xrspook @ 20:03:26 归类于:烂日记

2012-12-22_map01

2012-12-22_map02

看出这两个图的区别了吗?这就是我今天奋战大半天的成果!

啥?没看出来?不是吧,一个白色刺眼,一个没了!今天做了很表面化的工作——把默认滚动条改用jquery格式化了!这再也不是从前,很久很久以前在IE下用CSS就能修改搞定的东西。

建成MAP OF DESTINY 2012的时候,我就已经觉得那个只能必须内嵌的滚动条很刺眼了,当时也知道用jquery可以解决,但一直没有在那里花心思。直到今天偶尔看到介绍高级滚动条的文章,于是就试验了。

这次使用的是mCustomScrollbar,据说这是非常高级的玩意,没有做不到只有你想不到,太多隐藏功能,需要慢慢地去发掘,我就别不懂装懂了。

花了一个多小时就在静态页面中折腾出我想要的效果。但我的MAP OF DESTINY是动态加载的,需要加载Google Spreadsheet也需要加载Google Map。很不幸,这两种东西在天朝都需要翻墙。所以,这个地图做出来我的确不是为了给国人看的。这是给我自己看的,也是给外国人羡慕嫉妒恨的。理论上啊,静态网页测试成功的东西直接搬到map上就好,实际上不然。出现加载问题,翻墙、不翻墙、翻墙快慢会影响效果到底能不能显示出来。

很奇怪的现象,在不翻墙和翻墙速度快的情况下,网页一开始就告诉加载滚动条不成功,但在翻墙速度慢的时候加载反而OK。我的网速很好,但ouyansh的网速不好,于是在就形成了,我看不到效果,但他一开始就看到了。

经过一番周折后,ouyansh最终觉得那是网页加载延迟的问题,加了一个判断后,finally,finally,finally网页终于能在各种翻墙不翻墙以及网速的情况下都正确显示我的自定义滚动条效果了!!!

滚动条的样式是自定义的,我选用的是11px直径的圆点为滑块配合1px虚线的滚动槽,并不是用最传统的长条的滑块以及有一定宽度的滚动槽。所以,其实我冒着别人看不懂那是什么的风险做这个尝试的。因为这个效果是我最喜欢的,ouyansh说按照我的意思就好,别人就让他们忍忍吧。

在WWE全面开始放圣诞假期的今天,我闲得无聊,于是就有机会折腾这技术活了。

人是要勇于折腾的哈!

2012-03
13

直面它们

By xrspook @ 16:48:13 归类于:烂日记

今天,不可思议地,我一口气完成了职称英语2012综合类全部15篇的补全短文。补全短文,这是我之前一直很不习惯且做得很烂的题型,特别是一开始接触的时候,我是浑然不知怎么办,发毛。但今天,不可思议地,我用比做阅读理解还要少很多的时间啃掉了全部的补全短文。从一个我害怕的题型变成了现在我比较喜欢的题型,在它面前我不再颤栗。很多技巧,你可以阅读、学习、模仿,但最终还是要靠你自己去实践。

YOU CAN’T RUN, YOU CAN’T HIDE, YOU HAVE TO KNOW HOW TO FACE.

这是一句貌似出自我高中英语课本的句子,简而言之,等于一句古话“越怕黑,越见鬼”。逃避不能真正解决问题,只会让问题扩大化。

所以,当昨天发现WWE.COM改版的时候,我很坦然。作为一个也算玩了网站8年+的人来说,改版再普通不过了,而且,对上一次WWE.COM改版已经是1年多以前的事。我的唯一选择就是见招拆招,遇强越强。无论怎么变,网站都是人写出来的,按照美国人的办事风格,理论上应该新一版比老一版更科学合理,层次更分明更符合现在的网站的编写规则。如果说我觉得难了,非常有可能只是我水平不够而已。我不觉得自己的水平有多高,但起码,我得更跟上网站改版的速度。昨天,我是曾经不淡定过的,因为单位有植树活动,有试验样品要完成,晚上还要出去吃饭,今天就是Raw了,我必须在今天之前完成重写,我没有多少时间。我相信,我能写出来的,但我当时真的不确信我能否及时完成。但最后,我居然做到了,谢天谢地!

网友说,其实我应该广开思路,正则是一个方法,但未必就是最好的。要在一个网页里定位,查找东西,jQuery是个非常好的选择。我尝试过JQ,就如我尝试过Javascript一样,暂时还没有一个项目是让我觉得非如此不可地使用它们,所以在它们的问题上,我长进得很慢。

慢慢来吧,我现在主攻的是西语、职称英语、吉他,当我的外语算是差不多的时候,我会继续找些东西来消磨我的时间强化我的意志的,但现在,不是时候。

我们不是生来就强悍的,但我们可以通过后天的学习变得stronger。

耐心积累,厚积薄发。TIME WILL TELL.

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

反正我是非常认同的。

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

2011-11
27

REALEZA不成TEA EXPO去

By xrspook @ 22:06:12 归类于:烂日记

我真的已经很用力地去想解决“a div a”这个三角恋问题了!不过,还是没想出对策,哭~~~

这“a div a”三角恋是这样的:第一个“a”嵌套着第二个“div”,第二个“div”嵌套着第三个“a”,理论上,第二个“div”肯定被第一个“a”包含,但如果“div”里含有第三层的“a”,那么“div”就会自动脱离第一个“a”的嵌套,第一个“a”和第二个“div”变成同级关系。这会导致什么结果呢?第一层“a”和第三层“a”同时存在!但我的目标是当鼠标滑过div这个片区时只有一种链接即只有第一个“a”起作用,第三层“a”必须的只保留纯文本或者干脆拜拜。

没看懂我上面话的可以直接看源文件:HTML + CSS

这貌似很简单,但我至今没找到对策,尤其是适合各种主流浏览器的(Chrome,Firefox,IE8等)方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// SH想出了这个
 
jQuery(".postmetadata1").each( function() {
	jQuery(this).html(jQuery(this).html().replace(/<a [^>]*>|< \/a>/gi,""));
});
 
// 我折腾出了这个
 
jQuery(".postmetadata1 a").each( function() {
	$(this).replaceWith($(this).html());
});
 
// 点点的Lei给出了这个
 
$(".postmetadata1").each(function() {
	var str = jQuery(this).html(),
	code = str.replace(/</a><a [^>]*>|< \/a>/gi,"");
	console.log(str);
	console.log(code);
	$(this).html(code);
	console.log($(this).html());
});
</a>

在Firebug看,这三种方法都能把第三层a干掉,不过,三个方法都会把第一层“a”和第二层“div”变成同级,即第一层“a”失效,无法做到当鼠标移过第二层“div”片区的时候出现正确链接。三种方法在Chrome和Firefox下片区链接都浮云了,展示效果一样。SH的方法在IE8下可以实现我的目标功能;我的方法在IE8下显示诡异,第二层“div”片区有第一层“a”的导航但无法打开链接;Lei的方法在IE8下会显示怪异,第二层“div”片区有第一层“a”的导航但无法打开链接,也有第三层“a”的导航且可以打开。各种怪异,各种神奇!!!!为什么用点点的“description|nohtml”就能轻易除去内容里的各种HTML标记,要在浏览器层面单纯干掉这般嵌套的“a”却这么难呢????

期望高人想出解决问题的JavaScript(可以包含jQuery)!

昨晚在电脑前抓了几个小时的头,凌晨1点+才睡觉,今天在早上继续抓了1个多小时,未果,不能再纠结了,我答应了妈要陪她去茶博会的,茶博会今天是最后一天。于是,大概在中午1点,我暂时放下包袱,出门口了。

茶博会么,有茶的,也有咖啡的。今天我花掉了95元,20元的入场费(10元/人),10元的espresso体验(5元/杯,250mL),15元的2罐玄米茶叶,50元1套的250g纯咖啡粉越南滤杯套装送了5条同一牌子的三合一咖啡。妈花了10元买胎菊。最让我兴奋的收获该数各种咖啡的试喝。第一次喝espresso呢!漂亮是有了,但我觉得有点怪怪的,味道有点淡,5元250mL我就不奢求什么了。虹吸式咖啡壶煮出来的波多黎各咖啡,这种波多黎各咖啡酸味挺弱,基本没有,苦味中偏强,苦后会甘。喝了不知道是不是猫屎咖啡的猫屎咖啡,酸味和苦味都要比波多黎各的重,味道也更活泼延绵,苦后甘,但感觉跟我平时喝的不太一样,我不是很喜欢。最痛苦的要数某个意大利咖啡,估计那是要弄espresso的,但没有奶没有发泡,所以,杯具啊~~~ 不酸、苦得很彻底,是我喝过所有咖啡中最苦的!苦完以后还不甘,内牛满面,不习惯咖啡的小盆友别自残试这个,即便30mL都会让你抓狂死…… 现在我仍无睡意,今晚或许要看着蚊帐顶发呆了。可能是我来得不是时候吧,这个咖啡展区已经有很多单位撤场了,而且随着时间的推移,各个商家都在打包降价促销想赶快走人,这有好有不好。

我可以明确地说,我对茶叶没什么爱的,对茶具也没什么爱的。

茶博会出来,本来想去员村的知名外国超市麦德龙见识一下,但那个鬼地方需要会员卡,我那个去!为啥不在门口写?!保安站在入口查会员卡,我分明的木有。这让我想起了很久很久以前机场路附近的万客隆,也就是现在的易初莲花,也是要会员卡,大概是10年+以前的事了,但那时万客隆就已经不免费提供塑料袋,但入场人流依旧变态,那是我第一次见识什么叫做Supermarket!后来,好又多遍地开花了,家乐福来了,吉之岛越来越多了,华润万家、百佳雨后春笋,超市成了普通事物,但第一次的万客隆经历还是很惊艳。今天在麦德龙吃到了闭门羹,很不爽,但总有一次,我会去那里见识的!

下午5点多回到家,继续纠结我的“a div a”三角恋,依旧未果,呜呜呜~~~

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