jQuery实现的中英文切换功能示例


Posted in jQuery onJanuary 11, 2019

本文实例讲述了jQuery实现的中英文切换功能。分享给大家供大家参考,具体如下:

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();//刷新当前页面.
}

3.translate.js是将http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**的源码下载下来的,并将里面

<1> J = "block", ib = "inline-block",都改成等于none

<2>s.style.color = q;s.style.backgroundColor = p两行注释

目的是去除翻译后出现的弹框和hover效果

最后:

jQuery实现的中英文切换功能示例

jQuery实现的中英文切换功能示例

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
You might like
php生成图片缩略图的方法
2015/04/07 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python变量的存储原理详解
2019/07/10 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
进步之星获奖感言
2014/02/22 职场文书
科研课题实施方案
2014/03/18 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
安全生产标语大全
2014/10/06 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers