用我喜欢的字体(Cufon)

优雅的设计经常包含一些特殊的字体,而这些字体并不存在于用户的字体库中,我们并不能奢求每一个访客都是设计师。  :-)

虽然CSS3标准给我们带来了@font-face属性,但他也仅仅限于使用在“Gecko 1.9.1,Applies to Firefox 3.5, SeaMonkey 2, and Thunderbird 3 and later

不是Type2呢?不是Firefox3.5呢?显然这并不是一个现实的解决方案,毕竟我们有90%以上的用户在使用IE。

为了解决这个问题,我们使用了sIFR框架,但是这玩意一点也不好,首先是大,其次是慢,而Cufon可以很好的代替它。

什么是 Cufon 呢?Cufon 是一个实现在网页中对文字字体进行渲染的纯 JavaScript 开源类库。

使用Cufon非常简单,只需要在页面中引入Cufon得核心文件,然后在http://cufon.shoqolate.com/generate/ 将你的字体转换为JS字体文件并引用到页面中。

接下来,就可以使用相应的Cufon API对页面中的字体进行渲染了。

那么Cufon是如何对页面字体进行渲染的呢? 当然是VML、Canvas、SVG,因为网上已经有了相关的文章,所以我就不复制粘贴了。如果你有兴趣,可以看这里了解详细。

最后,因为Cufon是将字体以JSON格式进行编码,所以如果字体是中文的话,这个JS库会增大数倍,使用的时候一定要谨慎。

参考资料:
http://www.ibm.com/developerworks/cn/web/0911_zhuzh_cufon/
http://www.mikeindustries.com/blog/sifr/
https://developer.mozilla.org/index.php?title=en/CSS/%40font-face
http://wiki.github.com/sorccu/cufon/api

原文链接(325 views)|暂无评论(赶紧抢沙发)

Firefox的新属性 pointer-events

Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持,这次Firefox把他扩展到了常见的HTML元素上。

pointer-events的语法为
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

其中auto和none可针对所有的元素使用,其它的值只针对SVG。
(as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.)

当使用none的时候,当前节点下的所有子节点不接受event事件。反之则接受。

例如当pointer-events为none时:

#test {
    pointer-events:none;
  }
 
#test:hover {
    background: red;
}

鼠标移动到p节点上时将没有不会触发任何事件。

值为auto时:pointer-events/auto.htm

值为none时:pointer-events/none.htm

不过针对HTML元素是Firefox自己创造的新玩意。 :)

参考:
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
https://developer.mozilla.org/en/CSS/pointer-events

原文链接(68 views)|暂无评论(赶紧抢沙发)

纯数字不重复排列的另类方法

方法不是主流的。

有一组数据,大概10万个左右,每一单位的值不会大于30000,要求按照由大到小的顺序不重复输出。

参考无忧cosin的方法后(多谢),整理的方法如下

//一段随机数,模拟用
var baseNum=[];
for(var i= 0;i< 100000 ;i++){
 random = Math.floor(Math.random()*i);
 baseNum.push(random);
}
var baseNumLen = baseNum.length;
var numSubscript = [];
//将数字作为下标和值放到另一数组内,实现排序和不重复
for (var i =0;i<basenumlen ;i++){
 if(numSubscript[baseNum[i]] == undefined)numSubscript[baseNum[i]]=baseNum[i];
}
//去除空的值并颠倒一下
baseNum = numSubscript.join(',').replace(/([,]+)/ig, ',').split(',').reverse();
document.write(baseNum);
题外:
假如数组是自己生成,客服果果写的这段代码就很好了。(牛逼)
var baseNum=[],tmp={},v;
for(var i= 0;i< 100000 ;i++){
        tmp[Math.floor(Math.random()*i)]=true;
};
i=0;
for (var k in tmp){
        baseNum[i++]=k;
};
baseNum.sort(fn);
function fn(x,y) {
        return x-y&gt;0?1:-1
}
document.write(baseNum.join(''));

原文链接(36 views)|暂无评论(赶紧抢沙发)

jQuery Select(单选) 模拟插件 V1.3.6

a、增加了onchange事件。(谢谢fjgysai)

b、可以支持方法连缀了。

c、修正opera下的笔误。

d、可支持jQuery的选择器了

下载地址:http://www.zhangjingwei.com/demo/jQuery.Select/index.html

您可以自由的使用这个插件在任何项目上。(商业、非商业)
希望您可以补充完善这个插件。

原文链接(459 views)|评论 (22)

Date对象格式化方法

/*
 * Date Format 1.2.3
 * (c) 2007-2009 Steven Levithan
 * MIT license
 *
 * Includes enhancements by Scott Trenda
 * and Kris Kowal
 *
 * Accepts a date, a mask, or a date and a mask.
 * Returns a formatted version of the given date.
 * The date defaults to the current date/time.
 * The mask defaults to dateFormat.masks.default.
 */
 
var dateFormat = function () {
	var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
		timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
		timezoneClip = /[^-+\dA-Z]/g,
		pad = function (val, len) {
			val = String(val);
			len = len || 2;
			while (val.length &lt; len) val = "0" + val; 			return val; 		}; 	// Regexes and supporting functions are cached through closure 	return function (date, mask, utc) { 		var dF = dateFormat; 		// You can't provide utc if you skip other args (use the "UTC:" mask prefix) 		if (arguments.length == 1 &amp;&amp; Object.prototype.toString.call(date) == "[object String]" &amp;&amp; !/\d/.test(date)) { 			mask = date; 			date = undefined; 		} 		// Passing date through Date applies Date.parse, if necessary 		date = date ? new Date(date) : new Date; 		if (isNaN(date)) throw SyntaxError("invalid date"); 		mask = String(dF.masks[mask] || mask || dF.masks["default"]); 		// Allow setting the utc argument via the mask 		if (mask.slice(0, 4) == "UTC:") { 			mask = mask.slice(4); 			utc = true; 		} 		var	_ = utc ? "getUTC" : "get", 			d = date[_ + "Date"](), 			D = date[_ + "Day"](), 			m = date[_ + "Month"](), 			y = date[_ + "FullYear"](), 			H = date[_ + "Hours"](), 			M = date[_ + "Minutes"](), 			s = date[_ + "Seconds"](), 			L = date[_ + "Milliseconds"](), 			o = utc ? 0 : date.getTimezoneOffset(), 			flags = { 				d:    d, 				dd:   pad(d), 				ddd:  dF.i18n.dayNames[D], 				dddd: dF.i18n.dayNames[D + 7], 				m:    m + 1, 				mm:   pad(m + 1), 				mmm:  dF.i18n.monthNames[m], 				mmmm: dF.i18n.monthNames[m + 12], 				yy:   String(y).slice(2), 				yyyy: y, 				h:    H % 12 || 12, 				hh:   pad(H % 12 || 12), 				H:    H, 				HH:   pad(H), 				M:    M, 				MM:   pad(M), 				s:    s, 				ss:   pad(s), 				l:    pad(L, 3), 				L:    pad(L &gt; 99 ? Math.round(L / 10) : L),
				t:    H &lt; 12 ? "a"  : "p",
				tt:   H &lt; 12 ? "am" : "pm",
				T:    H &lt; 12 ? "A"  : "P",
				TT:   H &lt; 12 ? "AM" : "PM", 				Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), 				o:    (o &gt; 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
				S:    ["th", "st", "nd", "rd"][d % 10 &gt; 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
			};
 
		return mask.replace(token, function ($0) {
			return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
		});
	};
}();
 
// Some common format strings
dateFormat.masks = {
	"default":      "ddd mmm dd yyyy HH:MM:ss",
	shortDate:      "m/d/yy",
	mediumDate:     "mmm d, yyyy",
	longDate:       "mmmm d, yyyy",
	fullDate:       "dddd, mmmm d, yyyy",
	shortTime:      "h:MM TT",
	mediumTime:     "h:MM:ss TT",
	longTime:       "h:MM:ss TT Z",
	isoDate:        "yyyy-mm-dd",
	isoTime:        "HH:MM:ss",
	isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
	isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
 
// Internationalization strings
dateFormat.i18n = {
	dayNames: [
		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
		"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
	],
	monthNames: [
		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
		"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
	]
};
 
// For convenience...
Date.prototype.format = function (mask, utc) {
	return dateFormat(this, mask, utc);
};

点击这里查看文章详细 »

原文链接(111 views)|评论 (2)