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

使用方法

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

HTML结构

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

  

    

      
      EN 
      
    


    

      
      简体中文      
    
    
    

      
      English (US)      
    
   
    
     

      
      Deutsch      
    
    
    

      
      Espa?ol      
    
  
    

      
      Fran?ais      
    
    

      
      Português (BR)      
    
 
    

      
      ???????  (SA)      
    
 
  



  

    
  
  

    

    

    Link
  

                

JavaScript

实现多国语言切换的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');
    }
    
  });
});                  
                

该jquery多国语言切换特效的原文地址为：https://codepen.io/AndreCortellini/pen/xPMEWK