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 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery treeview树形结构应用
Mar 24 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
如何让CI框架支持service层
2014/10/29 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python中元组,列表,字典的区别
2017/05/21 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
购房协议书
2014/04/11 职场文书
激励口号大全
2014/06/17 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
高考升学宴答谢词
2015/01/20 职场文书
检讨书范文1000字
2015/01/28 职场文书
应届生简历自我评价
2015/03/11 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
网吧员工管理制度
2015/08/05 职场文书
2016年清明节寄语
2015/12/04 职场文书
员工给公司的建议书
2019/06/24 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers
SpringBoot详解执行过程
2022/07/15 Java/Android