“Web综合”目录存档

URL锚点HTML定位技术机制、应用与问题

2013年08月25日,星期日

点击查看本文

关于锚点,我3年前就写过关于锚点跳转及jQuery下相关操作与插件,不过内容略浮躁,都是偏表象、偏基本应用层面的东西;这里还是关于锚点,探讨的内容可能更深层次一点。

我们可能就很简单地认为锚点定位的触发是通过点击事件。而实际上,这种顺势而然的理解类似于古人理解为太阳绕着地球转一样,是有失偏颇的。我个人认为,锚点的定位是通过……

长篇,内容丰富,干货较多,希望本文内容能够对您的学习有所帮助!

阅读全文…

翻译:web制作、开发人员需知的Web缓存知识

2013年05月23日,星期四

Web缓存
缓存是什么?顾名思意,就是缓慢的存钱。为什么要缓慢的存钱,因为工资卡都上交老婆了,为了攒点零花钱又不能被老婆发现,只能慢慢存了。那缓存有什么用呢?你想啊,自己有点小钱,做事情就方便快捷了,比方说我想买个鱼竿,就不要去向老婆要(给不给先不谈),自己从自己这边取,大大提高了执行的速度。

那什么时候可以存什么时候不能存呢?老婆给零花钱的时候,可能会有过期时间头,例如,周一甩了100块钱,拿去,这是一周的伙食!这个一周就是过期时间头(Expires Header),在这个时间内,你的前可以从缓存,也就是自己这里取……

阅读全文…

HTML5 datalist在实际项目中应用的可行性研究

2013年03月27日,星期三

本文内容属于边学习边总结的,到底说了些什么,我也不知道。就自己个人而言,熟练了JS的一些使用,更了解select下拉框,当然熟悉datalist是肯定的,文本就是讲这个的嘛。了解了IE9下onpropertychange以及oninput事件无法被delete的问题,不认识的datalist内部的option会被忽略等问题。

demo不少,截图更多,源代码也有,内容也不少,总之,希望磕磕叨叨的内容能够对您的学习有所帮助。

阅读全文…

利用重绘解决IE下JS交互产生的定位重叠等棘手bug

2013年01月22日,星期二

我们平常在页面布局时候探讨的bug大多都属于静态的——即页面载入渲染完毕后出现的布局问题,像是错位啊,不对齐啊,行高失效等。
这些都是嚼了好多年的烂芋头,就像风水日晒很多年的门面店,是个装修工都能美化修复,不值得拿出来卖弄。
还有一类bug是伴随着JS交互产生了,比方说一个外表靓丽光鲜的门面店,只要门一开,尼玛,天花板就会挂到门上去了。此时该怎么办?……

本文就将从重绘这块解决JS交互再IE浏览器下产生的棘手问题,精制的demo,丰富的截图以及必要的源代码展示,希望本文的内容能够您的学习有所帮助。

阅读全文…

渐进式jpeg(progressive jpeg)图片及其相关

2013年01月7日,星期一

网络上那些色色的照片都是.jpg格式的(“色色”指的是色彩斑斓的意思)。
不知诸位有没有注意到,这些jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示),例如下面的示意……

阅读全文…

Page Visibility(页面可见性) API介绍、微拓展

2012年11月29日,星期四

某君王啪啪啪啪打开了十几二十个选项卡(就像他当初啪啪啪啪宠幸后宫那十几二十个宫女一样);但是,鞭长莫及,其一次只能浏览一个选项卡(就像他每晚只能宠幸一个宫女一样);可是,其他的选项卡并不知道君王何时会再过来(就像其他的宫女并不清楚君王今晚会不会来宠幸一样);于是,其他选项卡依然在不停地运行,守候(就像宫女依然留有希望,等待召幸);然而,最后,君王直接啪一下浏览器关掉了,N多不停忠心守候的选项卡被无情漠视了(就像宫女们苦守整夜……

阅读全文…

我是如何在实际项目中使用before/after伪元素的

2012年11月16日,星期五

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。
我想,这可能受兼容性思维影响……

阅读全文…

web上渐进使用jQuery Mobile中animate相关CSS

2012年11月2日,星期五


animate虽然是CSS3中随时比较高级的东西,看上去与实际的web项目不搭噶,但是,这里,我要告诉你,在实际web项目中也是可以渐进使用CSS3 animation相关动画的,而且,操作难度以及兼容性处理都是很低的哦!

本文以比较实用的jQuery Mobile框架中开源的animate相关CSS代码为实例,分别展示了其中各种animate效果在实际交互中的应用。大量demo,大量截图以及源代码示意。相信本文的内容会对您的学习有所帮助的!

阅读全文…

“更多|收起”交互中渐进使用transition动画

2012年10月19日,星期五

虽然,web世界中,交互动画效果N多多,但是,很多都是约定俗成的,或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码,我们可以将效果归结为这几大类:slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏,适合pop效果;绝对定位浮动层(如智能提示下拉框,自定义时间选择控件)等的呈现与隐藏使用fade效果;幻灯片播放的广告位效果一般为slide效果;点击某商品飞入页面右下角或左上角的购物车就是flip效果(类似最新FireFox浏览器关闭标签页效果)。
而对于页面上,“展开更多|收起更多”这类交互……

阅读全文…

HTML5 postMessage iframe跨域web通信简介

2012年02月29日,星期三

本文的内容说白了就是如何解决web开发中的跨域通信问题的,例如iframe相关的一些交互等。以下为部分摘要:
当我们谈论web通信的时候,实际上谈论的是两个略有不同的系统:跨文档通信(cross-document messaging)和通道通信(channel messaging)。跨文档通信就是我们国内更为熟知的HTML5 window.postMessage()应用的那种通信;通道通信也被称为”MessageChannel”. 伴随着server-sent事件以及web sockets, 跨文档通信和通道通信成为HTML5 通信接口“套件”中有用的一部分。

本文内容还算较多,demo啊,截图啊,代码展示讲解等都有。希望本文的内容能够对您的学习有所帮助。

阅读全文…