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实现全选、全不选以及单选功能
Mar 23 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
如何使用jQuery操作Cookies方法解析
Sep 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Javascript模板技术
2007/04/27 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python扩展内置类型详解
2018/03/26 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python线程优先级队列知识点总结
2021/02/28 Python
员工评语大全
2014/01/19 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
师德师风剖析材料
2014/09/30 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python