Loading...
显示标签为“javascript”的博文。显示所有博文
显示标签为“javascript”的博文。显示所有博文

2009年4月8日星期三

google的mp3搜索--巨鲸音乐widget--动手制作flash开关

最近听朋友说google在中国大陆出了一个音乐搜索的功能,HATA昨天click上google看了一下,觉得做的挺好的。对比很早就提供了同类服务的百度,google这次添加了两个特色功能:
1,在播放音乐时会通过浏览器的cookie记录下播放的音乐在播放器列表里,那样我们就可以在下次打开google提供的播放器上看到以前播放过的歌。同样,可以通过试听一大堆歌后才选择喜欢的歌曲下载。
2,用泡泡挑歌,这个大概就是google的"手气不错"音乐版。HATA也同样觉得"手气不错"这个功能更适合在试听MP3上。nice try:

by the way,这个功能令我想起一个flash制作的音乐网站http://musicovery.com/

google合作伙伴巨鲸音乐网

在google的音乐播放器上面,会看到Top100.cn的商标,同时留意地址的话,也会发现http://g.top100.cn/的域名,没错,这次google在音乐搜索服务上的合作伙伴是巨鲸音乐网。
其实HATA比较少关心音乐的事情,因为HATA比较喜欢听古典。。不过冲着google的名声,HATA就点了一下巨鲸音乐网的链接。结果一眼就给HATA瞄到了右上角的音乐widget。
试用巨鲸的widget。HATA很少看见有国内的音乐widget(偶是乡巴佬,不喜qqzone,(ˇ︿ˇ)),也很少听见“正版音乐”之类的口号。。I like it~
不过试用一下。发现巨鲸自家的widget居然犯傻的。。两个毛病
1,打开网页就自动播放,确实不喜欢。
2,修改widget的代码后变得不稳定,一旦修改了widget(例如高度)就会变得不稳定了。。太犯傻啦。( ¯▽¯;)

解决flash自动播放的方法就是弄一个开关,最后放出一个HATA自用的简单开关,有javascript语言。下面是代码:
<center><div id="playmp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐?H3M by 陈奕迅</a></div></center>
<!-- 隐藏部分 -->
<div style="display:none"><div id="closemp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐?H3M by 陈奕迅</a></div><div id="mp3player"><li><div>(嵌入你的widget代码或flash什么的)</div></li><li><div><a href="javascript:void(0)" onclick="insert('playmp3','closemp3')">close</a></div></li></div></div>

<script>
function insert(a1,b1){
var a=a1;
var b=b1;
document.getElementById(a).innerHTML = document.getElementById(b).innerHTML;
}
</script>

开关按钮标题为“听听音乐?H3M by 陈奕迅”,可自行修改。演示DEMO:






原创文章如转载,请注明:转载自HATA菜谱

阅读全文...

2009年3月31日星期二

杂谈,突然其来的感觉,勾搭上了google chrome

手滑,标题还没有写完就pose了出去。。囧rz
话转回来,昨天HATA发现自己挂在beta区的悬挂式广告不动了(其实不是广告,是个会跟着滚动条走的menu,不过感觉跟广告一样丑。。),原因在于document.documentElement.scrollTop的值为0了。why,因为偶用了Google chrome。
记得以前听谁说过js上的document.documentElement.scrollTop和document.body.scrollTop的区别在于有定义docType和没有定义docType,当我们没有定义docType的时候,document.documentElement.scrollTop和document.body.scrollTop一样,反映垂直滚动条的顶部位置,当我们定义了docType后,document.body.scrollTop为0,document.documentElement.scrollTop的值仍然正常。看来Google chrome(谷歌浏览器)是不吃这一套了。
在定义了docType的情况下,document.documentElement.scrollTop不生效了,换回document.body.scrollTop,一切正常。什么原因呢?是wedkit的问题?还是V8?记得chrome出炉的时候我听过这样的介绍,chrome使用了全新的机制去实现网页的javascript,这就是v8。

下面HATA要谈谈google chrome了:
初接触google chrome 要追溯google chrome刚提供下载的时候,还是beta(0.几的未正式版本),使用它只是讨个新鲜,当时chrome摆出了好多令人诱惑的优点,不过令我印象最深刻的是它的ui,很干净,很简约,使用google chrome 看网页看到的网页范围永远是最多的。^^
无奈网站的兼容问题和chrome 的 flash player卡机问题(有linux上的adobe官方flash player影子。。),后来HATA渐渐放下了它。
因为firefox那巨人级的启动速度和身染百病的ie,HATA又勾搭上chrome了(^…^),现在的版本号是1.0.n版了,也就是正式版已经出台了,HATA使用的当前版本是dev的2.0.171版,版本编号很奇怪,正式版是1,beta版是2,这种编号的方法,HATA再次感觉到chrome并不是作为一个最终成品的软件而存在。而是一个部件。。

现在使用google chrome的感觉:
兼容:这是我觉得chrome进步最大的地方,不过也是理所当然的地方,这几天使用google chrome感觉相当平稳,没有看见什么兼容上的问题,flash也比以前走得快很多,暂时除了HATA那个悬挂式广告(orz..)外,一切正常(当然需要下载插件的网页兼容性一定是不行了);
速度:启动速度快,挂着几个网页关闭chrome的情况下,启动google chrome跟开文件夹的速度没什么不一样,使用过程中也很流畅(偶不是每次打开10几个网页的狂人);
javascript:v8是神物(/‵o′)/~ ╧╧),当然v8有多美,取决于你通常浏览怎样网页。
HATA想由OpenLaszle引入话题,简单介绍,OpenLaszle有点类似js框架语言,不过他是需要服务器处理的,通过使用OpenLaszle的语言lzx(类似js)写出来的东西,可以通过Dhtml或者flash的形式来实现,也就是可以把它翻译成js,或者swf。HATA想提出一个问题,用同样的语言既然可以翻译成js那为什么要翻译成swf来实现呢?(要知道swf的实现范围只能在一个矩形中,而js的实现范围是无比无界的。)
HATA觉得其中一个原因是js相当依赖浏览器的解析能力。这里有个OpenLaszle的Demo,内容是一个图片浏览平台。分别有flash方式和Dhtml方式两种,大家可以分别使用不同的浏览器体验一下dhtml方式的浏览效果。和拥有大量用户的ie对比,chrome表现相当流畅。
延伸一下,如果几乎是网页设计行业标准的ie能把自身js的解析提供一下,js可以帮我们在基本不提高下载数据量的前提下使页面变得更为丰富。
开发工具:网页开发功能在0.n版的时候我没有太多注意到,不过现在使用右键的Inspect element时发现感觉和firefox的firebug功能类似度相当高。
其他功能:不知道chrome会不会有像firefox里的附加组件功能,现在chrome里能够支持半个 greasemonkey也是拜v8的能力所赐。在dev里也增加了自动填表,全页缩放和自动滚动页面功能,据介绍有一个个人配置的功能HATA找不到(HATA最想要这个功能),不知道是不是后来去掉了。
个人觉得现在的chrome功能已经比较适合娇小的chrome了(HATA也有很多想要的功能不然HATA就白当ff饭了~)。因为关键还是性能,兼容能力和chrome能为google节省多少的运算时间。
啊~杂谈越写越杂了。
原创文章如转载,请注明:转载自HATA菜谱

阅读全文...

2009年3月18日星期三

发布一个小js,tooltip--1.66kb

今天HATA发布一个1.66kb的轻量级js,tooltip,打包后大约1.2kb,有渐变效果(fadein,fadeout)
DEMO:
举头望明月
原版DEMO地址
HATA是在Web Development Blog提供的代码进行修改的,主要修改了js的结构简化和修改css,使js不加载边框图片取而代之用边框制作出邮票效果。
基本的原理就是通过onmouseover和onmouseout触发function,通过tooltip这个function生成悬浮的div原件,设定定时器,修改透明值。从而做出fade的效果,当然啦,如果使用jquery的话,还可以省略fade的function呢,jquery果然是甜美物啊~
下面贴出css部分:
#tiptool1cont{display:block; padding:2px 7px; background:#666; color:#FFF;}
#tiptool1{position:absolute; display:block; margin-left:5px; border-width:1px;border-style:dashed;border-color:#666;}

下载:
HATA版(虚线边框)
原版(圆角有图片)
安装步骤:
1贴好上面提供的css
2找个地方安装js文件,用<script src="地址" type='text/javascript'/>引用或者用<script typetype='text/javascript'></script>括着js文件的代码直接贴上
使用:
HATA这里耍一下懒,把刚才demo的代码写出来,需要用的自行修改就行了
<span onmouseout="tooltip.hide();" onmouseover="tooltip.show('低头思故乡');">举头望明月</span>

原创文章如转载,请注明:转载自HATA菜谱

阅读全文...

2009年3月12日星期四

今天吃了一个js的快餐 >,<

今天HATA吃了一个javascript的快餐,前几天HATA尝试写一个翻译的js代码(还在修整中。。)结果累得要死。今天HATA本来想在网上找一些相关的pdf看看。于是顺藤摸瓜,HATA找到一本名为《精通Javascript+jQuery》的书。
这里有个第10章(jQuery) 的试看版本。书一共分了19章,前十章是基础部分,后九章是实例应用部分。目录

搞错了搞错了,HATA不是想介绍这本书如何如何,HATA只是想介绍快餐给js的初学者而已。看到这个的视频目录链接吗?里面有齐了19章的视频内容,第九章Ajax视频:

值得欢呼的是每段视频好像都只有10几分钟的长度(HATA只看到第九章,就连忙写这篇blog了),不明原因的某群众:"什么意思,这么短好吗?" HATA觉得不错啊,虽然他朗读的时候语调有点囧。。不过作者说话干净,不会让人有昏昏入睡的感觉。话的内容也是纲要部分,不会说得太细,简明扼要,很符合了快餐的特性。当然啦,要对js进行深入的了解不看看书和使用文档是不行的。
期待日后js功力大增,万岁~
原创文章如转载,请注明:转载自HATA菜谱

阅读全文...

2009年3月6日星期五

边学边改blog--一个按钮搞定繁简(简繁)翻译(YAHOO)

这几天看了google的api,主要看了翻译的api,发现用google对网页进行局部翻译并不是一件难事。那个代码HATA还在搞,感觉也不能,估计这两天能搞好。嗯嗯,HATA跑题了,这天郁闷之制,HATA用yahoo的翻译服务做了个即时翻译网页的按钮。搞好基于google的翻译代码后,这按钮估计就会撤下了,下面是按钮:
<div id="trans">loading</div>
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zh_zt&btnTrUrl=Translate">繁体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>
直接拉到widget里就可以用了这是简体->繁体的,繁体->简体的是:

<div id="trans">loading</div>
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zt_zh&btnTrUrl=Translate">简体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>

因为代码放在文章里不能用(基于安全的问题吧),这里就不给效果了,反正点下去就就会进入babelfish的翻译页。
原创文章如转载,请注明:转载自HATA菜谱

阅读全文...