如何在自己的博客里添加每日口语和划词翻译功能

几天我写这篇文章所说的所有功能都是围绕这 dict.cn 这个网站提供的服务来说的。dict.cn 这个网站是我无意中发现的,感觉非常的好,对 ajax 技术的使用可以说是炉火纯青啊。他的整个运营模式我也非常喜欢,是个词霸在 web 2.0 的典型应用,大家有空可以去看看。 www.dict.cn

大家看看我博客(pinzui.blogcns.com)上面的每日口语功能,实现这个功能其实很简单,就是在首页上面绘出一个 div ,然后把我们的从 dict.cn 上面得到的显示每日口语的脚本放上就ok了,当然唯一一点值得注意的就是 div 的优先级,因为如果使我们自定义的 div 不指定他的优先级会被上面的 div 覆盖,就不能显示了。下面给出代码,把它放到博客园后台的自定义 css 模块里面就好了。

#topdictcn{ position:absolute; font-size:12px; left:200px; top: 96px; z-index:100; }

上面拿个层的z-index定义成一百就是让他在最上面,然后在页首html代码里面添加下面的代码就搞定了。

<div id="topdictcn">
<span id="dict_daily">
<a href="http://dict.cn/" target="_blank">Dict.CN</a>
</span>
<script language="JavaScript" src="http://dict.cn/daily.php" defer="defer">
</script>
</div>
下面在看看如何添加划词翻译功能,其实也是很简单,加入下面的代码
<script src="http://dict.cn/hc/" type="text/javascript"></script>
<script type="text/javascript">
dictInit();
</script> 
也可以添加一个划词翻译开关,在你想要的位置加入下面代码就搞定了
<span id="dict_status"></span>

具体的效果可以看看我的博客上面的效果,我没有打开划词翻译功能,因为我的博客都是汉语,开个划词翻译好像有些多此一举。

posted @ 2006-12-25 13:56 JesseZhao 阅读(543) 评论(5)  编辑 收藏 所属分类: D 感*悟H CSS

  回复  引用    
#1楼 2006-12-25 14:12 | nothing! [未注册用户]
你很无聊
  回复  引用    
#2楼 2006-12-25 14:12 | nothing! [未注册用户]
这种东西也发到首页!?
  回复  引用  查看    
#3楼 2006-12-25 15:07 | Jeffrey Zhao      
ajax已经不是什么神秘的东西了。:)
  回复  引用  查看    
#4楼 2007-01-01 11:30 | eyoung      
不错,就是速度如果能快点就好了
  回复  引用    
#5楼 2008-04-26 16:48 | 幽蓝粉杏 [未注册用户]
还是不会弄啊~

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-12-25 14:01 编辑过


相关链接: