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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现本地存储
Dec 22 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
大学生个人求职信
2014/06/02 职场文书
建设工地安全标语
2014/06/07 职场文书
离职报告格式
2014/11/04 职场文书
检讨书范文1000字
2015/01/28 职场文书
php引用传递
2021/04/01 PHP