简要教程

这是一款实现多国语言切换的jquery特效。在这个示例中，通过简单的js代码，实现包括中文和英文在内的7种不同国家语言的切换效果。

 使用方法

在页面中引入jquery和style.css。

<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>

 HTML结构

示例中，整个页面分为两个部分，一部分是选择语言的下拉列表框，另外一部分是显示文字的区域。

<!--选择语言的下拉列表框-->
<div class="translate_wrapper">
  <div class="current_lang">
    <div class="lang">
      <img src="https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class="lang-txt">EN</span>
      <span class="fa fa-chevron-down chevron"></span>
    </div>
</div>
<div class="more_lang">
    <div class="lang" data-value='cn'>
      <img src="https://image.flaticon.com/icons/svg/299/299914.svg">
      <span class="lang-txt">简体中文</span>     
    </div>
     
    <div class="lang selected" data-value='en'>
      <img src="https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class="lang-txt">English<span> (US)</span></span>     
    </div>
    
     
     <div class="lang" data-value='de'>
      <img src="https://image.flaticon.com/icons/svg/299/299786.svg">
      <span class="lang-txt">Deutsch</span>     
    </div>
     
    <div class="lang" data-value='es'>
      <img src="https://image.flaticon.com/icons/svg/299/299820.svg">
      <span class="lang-txt">Español</span>     
    </div> 
    <div class="lang" data-value='fr'>
      <img src="https://image.flaticon.com/icons/svg/299/299753.svg">
      <span class="lang-txt">Français</span>     
    </div>
    <div class="lang" data-value="pt">
      <img src="https://image.flaticon.com/icons/svg/299/299693.svg">
      <span class="lang-txt">Português<span> (BR)</span></span>     
    </div>
    <div class="lang" data-value="ar">
      <img src="https://image.flaticon.com/icons/svg/299/299815.svg">
      <span class="lang-txt">العربية <span> (SA)</span></span>     
    </div>
  </div>
</div>
<!--文字内容-->
<div class="content">
  <div class="ct-img">
    <img src="img/lizard-765x510.jpg">
  </div>
  <div class="ct-txt">
    <h1 id="title"></h1>
    <p></p>
    <a href="#"><span>Link</span></a>
  </div>
</div>

实现多国语言切换的js代码页非常简单，各国语言的标题，内容等被存放在一个数组中。

var trans = [
  {
    en : 'Chameleon',
    pt : 'Camaleão',
    es : 'Camaleón',
    fr : 'Caméléon',
    de : 'Chamäleon',
    cn : '变色龙',
    ar : 'حرباء'
  },{
    en : 'For sheer breadth of freakish ......',
    pt : 'Por uma infinidade de caract......',
    es : 'Por pura amplitud de extrañas......',
    fr: "Pour l'ampleur pure des caract......",
    de: 'Wegen der schieren Breite der......',
    cn: '由于极其奇特的解剖特征，变色......',
    ar : 'لمجرد اتساع الميزات التشريحية فظيع، ......'
  },{
    en : 'See More',
    pt : 'Saiba mais',
    es : 'Más información',
    fr : 'En savoir plus',
    de : 'Weitere Infos',
    cn : '查看更多',
    ar : 'مشاهدة المزيد'
  },
   
];

实现翻译的是translate()函数，它通过数组下标来查找相应的语言。

translate(tnum); 
function translate(tnum){
  $('h1#title').text(trans[0][tnum]);
  $('p').text(trans[1][tnum]);
  $('.content a span').text(trans[2][tnum]);
}

然后在点击下拉框中的选项时，通过获取data-value的值来得到当前用户选择了什么语言，然后再通过translate()函数将文字转换为相应的语言。

$('.more_lang .lang').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.more_lang').removeClass('active'); 
     
    var img = $(this).find('img').attr('src');   
    var lang = $(this).attr('data-value');
    var tnum = lang;
    translate(tnum);
     
    $('.current_lang .lang-txt').text(lang);
    $('.current_lang img').attr('src', img);
     
    if(lang == 'ar'){
      $('body').attr('dir', 'rtl');
    }else{
      $('body').attr('dir', 'ltr');
    }
     
  });
});

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端jQuery频道！