art.dialog轻量级对话框组件发布

随着时代发展，javascript阵营里面出现了越来越多的优秀的框架，大大简化了我们的开发工作，在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎样构建起来的呢？如果你不满足于仅仅是使用一些现成的API，而是深入了解它们内部的实现机制(照某人的说法, API是贬值最快的东西)，最好的办法就是阅读它们的源代码了，前提是你读得懂。

最近两天研究了一下jQuery的源码，在这里将本人一些粗浅认识分享出来，不当之处请各位指正。好了，下面我们就来看看jQuery大概是怎样工作的，我假定你已经具备了一些基本的javascript知识，如果基础不够俺推荐你阅读《JavaScript高级程序设计》和《悟透JavaScript》这两本书。本文不适合对js里面的类、对象、函数、prototype等概念没有了解的朋友。

全文 »

1 个评论
标签：javascript, jQuery, 框架

会呼吸的hover

作者: 唐斌

7 一 2010

逛网站的时候发现一个会‘呼吸’的图片，乍一看以为是flash做的。网站地址：dragoninteractive

后来才知道它是基于jquery与CSS结合制作的效果，代码很少，顿时被作者的创意折服。

一、先学习下

HTML代码：

<a id=”logotype” href=”#”></a>

CSS代码：

a#logotype { background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; text-indent:-999em; overflow:hidden; }
a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; }

上面有个.hover类，是用jquery生成的，javascript代码：

$(function() {
var fadeSpeed = ($.browser.safari ? 600 : 450);
$(‘#logotype’).append(‘<span></span>’);
$(‘.hover’).css(‘opacity’, 0);
$(‘.hover’).parent().hover(function() {
$(‘.hover’, this).stop().animate({
‘opacity’: 1
},
fadeSpeed)
},
function() {
$(‘.hover’, this).stop().animate({
‘opacity’: 0
},
fadeSpeed)
});
});

通过观看javascript可以知道这个是利用js插入一个新标签，通过动态改变透明度覆盖原来的背景，这样渐变的透明就显现出“温柔”的效果了。

二、我改进下

这个效果必须通过js支持，如果浏览器不支持js或者js没有加载完毕那连基本的:hover体验都没有了，但是如果添加了:hover又会破坏这个温柔的效果。如何解决？

方法：

如果js加载完毕，则破坏原有的:hover

javascript代码：

$(function() {
var fadeSpeed = ($.browser.safari ? 600 : 450);
$(‘#logotype’).append(‘<span></span>’).addClass(‘noHover’);
$(‘.hover’).css(‘opacity’, 0);
$(‘.hover’).parent().hover(function() {
$(‘.hover’, this).stop().animate({
‘opacity’: 1
},
fadeSpeed)
},
function() {
$(‘.hover’, this).stop().animate({
‘opacity’: 0
},
fadeSpeed)
});
});

可以看到javascript添加了一个noHover的类，我们只需要设置css让.noHover:hover失效即可。

CSS代码：

a#logotype,a#logotype.noHover:hover { background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; }
a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; }
a#logotype:hover { background-position: bottom left; }

查看改进后的实例

4 个评论
标签：css, hover, jQuery

互联网明争暗斗2009：在血色江湖中“蜗居”

作者: 唐斌

25 十二 2009

引言：生活就像是超女，熬到最后的都是纯爷们

如果从电影的视角盘点2009年的中国互联网，这绝非温情脉脉的偶像剧，也非闷骚含蓄的历史剧，而是一幕幕关于恩怨和仇恨的黑帮电影。如果要选择导演，不是吕克贝松，就是杜琪峰。
不管是已经占山为王的大佬，还是初出茅庐的小弟，几乎主流的公司都被设定在了剧情之中。即便是刻意要和江湖杀戮“保持距离”的，也难免或主动或被动地被拉进来，扮演路人甲、路人乙的角色。

无他，有人的地方就有江湖。

2009年的中国互联网，在枪与火中匍匐前进，没有让人眼前一亮的创新和变革，只有打打杀杀的血色浪漫，只有你争我夺的窝里斗。

从这个意义上来讲，2009年的中国互联网，还处于它的“蜗居”时代。既然是“蜗居”，难免为了水费、电费、卫生费的事，弄个面红耳赤，甚至大打出手……

客户端篇：搜狗输入法 PK 腾讯输入法