jQuery實(shí)現(xiàn)的中英文切換功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的中英文切換功能。分享給大家供大家參考,具體如下:
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切換</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/language.js"></script>
</head>
<body>
<button id="change">中英文切換</button>
<div style="text-align: center">
你好
</div>
</body>
<script type="text/javascript">
$("#change").click(function() {
translate();
})
</script>
</html>
2.language.js
$(function(){
// do something
var script=document.createElement("script");
script.type="text/javascript";
script.src="js/translate.js";
document.getElementsByTagName('head')[0].appendChild(script);
var value = sessionStorage.getItem("language");
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
if(value==="1"){
Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
}
}
}
function onProgress(value) {
}
function onError(error) {
}
function onComplete() {
$("#WidgetFloaterPanels").hide();
}
function onRestoreOriginal() {
}
});
function translate(){
var value = sessionStorage.getItem("language");
if(value==="1"){
sessionStorage.setItem("language", "0");
}else{
sessionStorage.setItem("language", "1");
}
window.location.reload();//刷新當(dāng)前頁(yè)面.
}
3.translate.js是將http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**的源碼下載下來(lái)的,并將里面
<1> J = "block", ib = "inline-block",都改成等于none
<2>s.style.color = q;s.style.backgroundColor = p兩行注釋
目的是去除翻譯后出現(xiàn)的彈框和hover效果
最后:


附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
- jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換
- jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能示例
- jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】
- jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換
- jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
- jquery橫向縱向鼠標(biāo)滾輪全屏切換
- 用jquery的attr方法實(shí)現(xiàn)圖片切換效果
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jquery淡化版banner異步圖片文字效果切換圖片特效
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
相關(guān)文章
jQuery插件ajaxFileUpload實(shí)現(xiàn)異步上傳文件效果
jQuery插件AjaxFileUpload用來(lái)實(shí)現(xiàn)ajax文件上傳,該插件使用非常簡(jiǎn)單,接下來(lái)我們來(lái)看下用AjaxFileUpload插件實(shí)現(xiàn)文件上傳的方法,有需要的小伙伴可以參考下2015-04-04
jquery之超簡(jiǎn)單的div顯示和隱藏特效demo(分享)
本篇文章是對(duì)jquery中的div顯示和隱藏特效demo進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07
jQuery Ajax 實(shí)現(xiàn)分頁(yè) kkpager插件實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家講解了jQuery Ajax 實(shí)現(xiàn)分頁(yè) kkpager插件功能,需要的的朋友參考下吧2017-08-08
ASP.NET jQuery 實(shí)例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter
這節(jié)介紹一個(gè)自己寫的jQuery文本框字符限制插件,至于如何寫插件,我這里就不多講了,可以查看相關(guān)介紹,這里主要介紹下該插件的功能2012-02-02
一個(gè)簡(jiǎn)單的jQuery插件制作 學(xué)習(xí)過(guò)程及實(shí)例
本文僅供參考,如有不足或錯(cuò)誤,請(qǐng)不吝賜教,這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ),進(jìn)行插件制作的說(shuō)明。2010-04-04
jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04
jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果的方法,以完整實(shí)例形式分析了jQuery插件jquery-1.2.6.pack.js實(shí)現(xiàn)文字提示效果的相關(guān)技巧,并提供了jquery-1.2.6.pack.js的本站下載地址,需要的朋友可以參考下2015-12-12

