‘JavaScript脚本’ 分类的存档

随着越来越多的交互效果,Javascript越来越流行,对前端的要求也越来越高,无论是Dom,Event,Ajax……还是jquery,prototype,mootools,YUI,我们需要更多的学习 发展

2 条评论一句话解决IE6 鼠标闪烁 or 抖动的问题

2010年12月17日

做一个效果遇到的问题 据说是IE6不缓存背景图片导致的 解决方法如下

<!--[if IE 6]>

<script> document.execCommand("BackgroundImageCache", false, true); </script>

<![endif]-->

3 条评论页面上的快捷键Hotkey for JavaScript

2010年10月10日

昨天去逛豆瓣小站(“前端攻城师”)发现了豆瓣新上了五指擒魔 有兴趣的可以去看下

之前在使用Google Reader的时候就发现了快捷键来进行操作的方式,对用户体验也是一种提升,现在基本看reader都是用快捷键

今天正好有时间就把豆瓣的实现看了一下 豆瓣团队的分享精神是我一直钦佩的 尤其是kejun 多次听他的演讲都深有感触

拿豆瓣的代码做了一个小Demo 地址是

http://www.iamued.com/demo/hotkey/

3 条评论[原创]简单的模板替换机制-jquery实现了局部

2010年9月7日

今天帮同事修改一个Tip提示的效果 提示中 需要用到当前元素的几个属性,就帮忙改了改之前的demo
这里是一个局部实现 可以参考
查看临时Demo
实际应用的案例:http://www.iamued.com/demo/simpletip/template/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>一个jquery的小模板机制-我是UED</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>

临时Demo的部分代码:
<script type="text/javascript">
	function test(){
		var testString="价格为{price}元,我是{name}"
		alert(testString.replace(/{([^{}]+)}/g,function(word){
			var _attr=word.replace(/({|})+/g,"");
			return $("#test").attr(_attr);
		}));

	}
</script>
</body>
</html>

查看临时Demo
实际应用的案例:http://www.iamued.com/demo/simpletip/template/

2 条评论[转]js中匿名函数的N种写法

2010年9月7日

在java中有private属性,强大的功能js不能实现就矮人一截,匿名函数,发扬广大
匿名函数没有实际名字,也没有指针,怎么执行滴?
其实大家可以看看小括号的意义就应该可以理解。小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把…
关于匿名函数写法,很发散~

//最常见的用法:
(function() {
   alert('water');
})();
//当然也可以带参数:
(function(o) {
    alert(o);
})('water');
//想用匿名函数的链式调用?很简单:
(function(o) {
    alert(o);
    return arguments.callee;
})('water')('down');

//常见的匿名函数都知道了,看看不常见的:
~(function(){
    alert('water');
})();
//写法有点酷~
void function(){
    alert('water');
}();
//据说效率最高~
+function(){
    alert('water');
}();
-function(){
    alert('water');
}();
~function(){
    alert('water');
}();
!function(){
    alert('water');
}();
(function(){
    alert('water');
}());
//有点强制执行的味道~

Sorry :) 刚才忘记把转载地址附上了
转自:
http://blog.163.com/water_down/blog/static/1702765902010869124093/

3 条评论Google HTML5+Rock Music :《The Wilderness Downtown》

2010年9月5日

The Wilderness Downtown
The Wilderness Downtown

如果你从没听说过互动电影,那就真的要点击这里开开眼界了。这个页面以灰白色调为主,页面上的动画效果皆由 HTML5 技术制作,官方推荐最好使用 Chrome 浏览器,经过我们的试用,IE8 与 Opera 均无法启动这个页面,而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

The Wilderness Downtown
谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比,偶尔还会出现崩溃现象,我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过,因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址,为什么?因为电影情节将会从这里开始,并且融合谷歌地图和谷歌街景的技术到电影中,达到非常震撼的互动效果,其他诸如 Canvas,Video,Audio 等的 HTML5 标准特效就更加不用多介绍了。

The Wilderness Downtown
输入小时候的住址

经过好一会儿的载入等待之后,由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了,开始的时候,一名模样十分鬼祟的白衣男子在狂奔,奔到有气无力的时候,电影会先暂停,让你用交互绘图工具绘画一张明信片,寄给小时候的你。

The Wilderness Downtown
一双无影脚

The Wilderness Downtown
谷歌街景视图中的是不是你儿时的家?

你可以用鼠标乱涂乱画,也可以直接输入你想说的话,不过这张明信片,无论你的画工有多精细,画出来的都只能是错综复杂的线条,配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs》中的歌曲 We Used to Wait 作为主题音乐,颇有剪不断理换乱的感觉。

The Wilderness Downtown
错综复杂的明信片

The Wilderness Downtown
写完明信片后将会是一段狂奔的视频

纸上谈兵完毕,最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。


The Wilderness Downtown

关于 Arcade Fire (拱廊之火)

Arcade Fire(拱廊之火)是一支独立摇滚乐队,来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne,他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓,除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器,然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire
Arcade Fire(拱廊之火)

拱廊之火乐队赢得了诸多奖项,包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral》(葬礼)和《Neon Bible》(霓虹圣经)同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs》(郊区),更是得到了评论界的称赞。