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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
pandas数据分组和聚合操作方法
2018/04/11 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
详解Python 解压缩文件
2019/04/09 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python实现代码统计程序
2019/09/19 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
什么是类的返射机制
2016/02/06 面试题
企业新年寄语
2014/04/04 职场文书
学习雷锋活动总结
2014/04/29 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
选购到合适的激光打印机
2022/04/21 数码科技
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技