js下拉菜单语言选项简单实现


Posted in Javascript onSeptember 23, 2013

js下拉菜单语言选项简单实现
旗子图片

(function($) { 
var jSelect = $(".jsSelect"); 
$(jSelect).find("li:first").hover(function(){ 
$(".s").css("background","url(images/68_60.png) 54px 0px no-repeat"); 
h=$(this).parent("ul").find("li").length; 
$(this).parent("ul").css("height",28*h) 
$(this).siblings("li:not(.s)").mouseenter(function(){ 
$(".s").css("background","url(images/68_60.png) 54px 0px no-repeat"); 
$(this).css("background","#428bca").css("color","#FFFFFF") 
}); 
$(this).siblings("li:not(.s)").mouseleave(function(){ 
$(this).css("background","none").css("color","#428bca") 
$(".s").css("background","url(images/68_60.png) 54px -30px no-repeat"); 
}); $(this).parent(jSelect).mouseleave(function(){ 
$(this).css("height",28) 
}); 
}); 
$(jSelect).find("li:not(.s)").click(function(){ 
var cContent=$(jSelect).find("li:first").html(); 
var cdContent = $(this).html(); 
$(jSelect).find("li:first").html(cdContent); 
$(this).html(cContent); 
$(this).find('a').removeClass('s'); 
$(this).find('a').removeAttr('style'); 
$(jSelect).find("li:first").addClass('s'); 
$(this).parent("ul").css("height",28); 
}); 
$(".s").css("background","url(images/68_60.png) 54px -30px no-repeat"); 
})(jQuery);

<ul id="language" class="jsSelect"><li><a href="#" class="s"><i class="flag-en-us"></i>English</a></li><li><a href="#"> <i class="flag-zh-cn"></i>简体中文</a></li><li><a href="#"><i class="flag-zh-tw"></i>繁体中文</a></li> 
</ul>

<link href="/public/css/flags.css" rel="stylesheet" type="text/css" /> 
<style> 
*{ 
margin:0px; 
padding: 0px; 
} 
body{ 
margin: 10px; 
} 
ul.jsSelect { 
width:121px; 
height: 28px; 
display:inline; 
margin-left:-2px; 
overflow:hidden; 
background:#FFF; 
float:left; 
border:1px solid #ccc; 
padding:0; 
} 
ul.jsSelect li { 
margin:0px; 
width:118px; 
height:28px; 
line-height:30px; 
font-size: 14px; 
font-weight: bold; 
cursor:pointer; 
padding:0px 3px; 
color:#ccc; 
border:none; 
list-style: none; 
} 
ul.jsSelect li a{ 
text-decoration: none; 
} 
ul.jsSelect .s { 
margin:0; 
display: block; 
margin-left: 0px; 
cursor: pointer; 
color: #666; 
border: none; 
background-image: url(images/68_60.png); 
background-repeat: no-repeat; 
background-position: 54px -30px; 
} 
</style>

flag.css
[class^="flag-"],[class*=" flag-"] {display: inline-block;margin-top:2px;width: 16px;height: 11px;line-height: 11px;vertical-align: text-top;background-image: url("http://file.aconf.org/public/images/icons/flags.png");background-repeat: no-repeat;*margin-right: .3em;margin-right: 0.3em} 
[class^="flag-"]:last-child,[class*=" flag-"]:last-child {*margin-left: 0 } 
.flag-ad{background-position:0 0} 
.flag-ae{background-position:0 -31px} 
.flag-af{background-position:0 -62px} 
.flag-ag{background-position:0 -93px} 
.flag-ai{background-position:0 -124px} 
.flag-al{background-position:0 -155px} 
.flag-am{background-position:0 -186px} 
.flag-an{background-position:0 -217px} 
.flag-ao{background-position:0 -248px} 
.flag-ar{background-position:0 -279px} 
.flag-as{background-position:0 -310px} 
.flag-at{background-position:0 -341px} 
.flag-au{background-position:0 -372px} 
.flag-aw{background-position:0 -403px} 
.flag-ax{background-position:0 -434px} 
.flag-az{background-position:0 -465px} 
.flag-ba{background-position:0 -496px} 
.flag-bb{background-position:0 -527px} 
.flag-bd{background-position:0 -558px} 
.flag-be{background-position:0 -589px} 
.flag-bf{background-position:0 -620px} 
.flag-bg{background-position:0 -651px} 
.flag-bh{background-position:0 -682px} 
.flag-bi{background-position:0 -713px} 
.flag-bj{background-position:0 -744px} 
.flag-bm{background-position:0 -775px} 
.flag-bn{background-position:0 -806px} 
.flag-bo{background-position:0 -837px} 
.flag-br{background-position:0 -868px} 
.flag-bs{background-position:0 -899px} 
.flag-bt{background-position:0 -930px} 
.flag-bv{background-position:0 -961px} 
.flag-bw{background-position:0 -992px} 
.flag-by{background-position:0 -1023px} 
.flag-bz{background-position:0 -1054px} 
.flag-ca{background-position:0 -1085px} 
.flag-catalonia{background-position:0 -1116px} 
.flag-cc{background-position:0 -1147px} 
.flag-cd{background-position:0 -1178px} 
.flag-cf{background-position:0 -1209px} 
.flag-cg{background-position:0 -1240px} 
.flag-ch{background-position:2px -1271px} 
.flag-ci{background-position:0 -1302px} 
.flag-ck{background-position:0 -1333px} 
.flag-cl{background-position:0 -1364px} 
.flag-cm{background-position:0 -1395px} 
.flag-zh-cn{background-position:0 -1426px} 
.flag-co{background-position:0 -1457px} 
.flag-cr{background-position:0 -1488px} 
.flag-cs{background-position:0 -1519px} 
.flag-cu{background-position:0 -1550px} 
.flag-cv{background-position:0 -1581px} 
.flag-cx{background-position:0 -1612px} 
.flag-cy{background-position:0 -1643px} 
.flag-cz{background-position:0 -1674px} 
.flag-de{background-position:0 -1705px} 
.flag-dj{background-position:0 -1736px} 
.flag-dk{background-position:0 -1767px} 
.flag-dm{background-position:0 -1798px} 
.flag-do{background-position:0 -1829px} 
.flag-dz{background-position:0 -1860px} 
.flag-ec{background-position:0 -1891px} 
.flag-ee{background-position:0 -1922px} 
.flag-eg{background-position:0 -1953px} 
.flag-eh{background-position:-36px 0} 
.flag-england{background-position:-36px -31px} 
.flag-er{background-position:-36px -62px} 
.flag-es{background-position:-36px -93px} 
.flag-et{background-position:-36px -124px} 
.flag-europeanunion{background-position:-36px -155px} 
.flag-fam{background-position:-36px -186px} 
.flag-fi{background-position:-36px -217px} 
.flag-fj{background-position:-36px -248px} 
.flag-fk{background-position:-36px -279px} 
.flag-fm{background-position:-36px -310px} 
.flag-fo{background-position:-36px -341px} 
.flag-fr{background-position:-36px -372px} 
.flag-ga{background-position:-36px -403px} 
.flag-gb{background-position:-36px -434px} 
.flag-gd{background-position:-36px -465px} 
.flag-ge{background-position:-36px -496px} 
.flag-gf{background-position:-36px -527px} 
.flag-gh{background-position:-36px -558px} 
.flag-gi{background-position:-36px -589px} 
.flag-gl{background-position:-36px -620px} 
.flag-gm{background-position:-36px -651px} 
.flag-gn{background-position:-36px -682px} 
.flag-gp{background-position:-36px -713px} 
.flag-gq{background-position:-36px -744px} 
.flag-gr{background-position:-36px -775px} 
.flag-gs{background-position:-36px -806px} 
.flag-gt{background-position:-36px -837px} 
.flag-gu{background-position:-36px -868px} 
.flag-gw{background-position:-36px -899px} 
.flag-gy{background-position:-36px -930px} 
.flag-hk{background-position:-36px -961px} 
.flag-hm{background-position:-36px -992px} 
.flag-hn{background-position:-36px -1023px} 
.flag-hr{background-position:-36px -1054px} 
.flag-ht{background-position:-36px -1085px} 
.flag-hu{background-position:-36px -1116px} 
.flag-id{background-position:-36px -1147px} 
.flag-ie{background-position:-36px -1178px} 
.flag-il{background-position:-36px -1209px} 
.flag-in{background-position:-36px -1240px} 
.flag-io{background-position:-36px -1271px} 
.flag-iq{background-position:-36px -1302px} 
.flag-ir{background-position:-36px -1333px} 
.flag-is{background-position:-36px -1364px} 
.flag-it{background-position:-36px -1395px} 
.flag-jm{background-position:-36px -1426px} 
.flag-jo{background-position:-36px -1457px} 
.flag-jp{background-position:-36px -1488px} 
.flag-ke{background-position:-36px -1519px} 
.flag-kg{background-position:-36px -1550px} 
.flag-kh{background-position:-36px -1581px} 
.flag-ki{background-position:-36px -1612px} 
.flag-km{background-position:-36px -1643px} 
.flag-kn{background-position:-36px -1674px} 
.flag-kp{background-position:-36px -1705px} 
.flag-kr{background-position:-36px -1736px} 
.flag-kw{background-position:-36px -1767px} 
.flag-ky{background-position:-36px -1798px} 
.flag-kz{background-position:-36px -1829px} 
.flag-la{background-position:-36px -1860px} 
.flag-lb{background-position:-36px -1891px} 
.flag-lc{background-position:-36px -1922px} 
.flag-li{background-position:-36px -1953px} 
.flag-lk{background-position:-72px 0} 
.flag-lr{background-position:-72px -31px} 
.flag-ls{background-position:-72px -62px} 
.flag-lt{background-position:-72px -93px} 
.flag-lu{background-position:-72px -124px} 
.flag-lv{background-position:-72px -155px} 
.flag-ly{background-position:-72px -186px} 
.flag-ma{background-position:-72px -217px} 
.flag-mc{background-position:-72px -248px} 
.flag-md{background-position:-72px -279px} 
.flag-me{background-position:-72px -310px} 
.flag-mg{background-position:-72px -342px} 
.flag-mh{background-position:-72px -373px} 
.flag-mk{background-position:-72px -404px} 
.flag-ml{background-position:-72px -435px} 
.flag-mm{background-position:-72px -466px} 
.flag-mn{background-position:-72px -497px} 
.flag-mo{background-position:-72px -528px} 
.flag-mp{background-position:-72px -559px} 
.flag-mq{background-position:-72px -590px} 
.flag-mr{background-position:-72px -621px} 
.flag-ms{background-position:-72px -652px} 
.flag-mt{background-position:-72px -683px} 
.flag-mu{background-position:-72px -714px} 
.flag-mv{background-position:-72px -745px} 
.flag-mw{background-position:-72px -776px} 
.flag-mx{background-position:-72px -807px} 
.flag-my{background-position:-72px -838px} 
.flag-mz{background-position:-72px -869px} 
.flag-na{background-position:-72px -900px} 
.flag-nc{background-position:-72px -931px} 
.flag-ne{background-position:-72px -962px} 
.flag-nf{background-position:-72px -993px} 
.flag-ng{background-position:-72px -1024px} 
.flag-ni{background-position:-72px -1055px} 
.flag-nl{background-position:-72px -1086px} 
.flag-no{background-position:-72px -1117px} 
.flag-np{background-position:-68px -1148px} 
.flag-nr{background-position:-72px -1179px} 
.flag-nu{background-position:-72px -1210px} 
.flag-nz{background-position:-72px -1241px} 
.flag-om{background-position:-72px -1272px} 
.flag-pa{background-position:-72px -1303px} 
.flag-pe{background-position:-72px -1334px} 
.flag-pf{background-position:-72px -1365px} 
.flag-pg{background-position:-72px -1396px} 
.flag-ph{background-position:-72px -1427px} 
.flag-pk{background-position:-72px -1458px} 
.flag-pl{background-position:-72px -1489px} 
.flag-pm{background-position:-72px -1520px} 
.flag-pn{background-position:-72px -1551px} 
.flag-pr{background-position:-72px -1582px} 
.flag-ps{background-position:-72px -1613px} 
.flag-pt{background-position:-72px -1644px} 
.flag-pw{background-position:-72px -1675px} 
.flag-py{background-position:-72px -1706px} 
.flag-qa{background-position:-72px -1737px} 
.flag-re{background-position:-72px -1768px} 
.flag-ro{background-position:-72px -1799px} 
.flag-rs{background-position:-72px -1830px} 
.flag-ru{background-position:-72px -1861px} 
.flag-rw{background-position:-72px -1892px} 
.flag-sa{background-position:-72px -1923px} 
.flag-sb{background-position:-72px -1954px} 
.flag-sc{background-position:-108px 0} 
.flag-scotland{background-position:-108px -31px} 
.flag-sd{background-position:-108px -62px} 
.flag-se{background-position:-108px -93px} 
.flag-sg{background-position:-108px -124px} 
.flag-sh{background-position:-108px -155px} 
.flag-si{background-position:-108px -186px} 
.flag-sj{background-position:-108px -217px} 
.flag-sk{background-position:-108px -248px} 
.flag-sl{background-position:-108px -279px} 
.flag-sm{background-position:-108px -310px} 
.flag-sn{background-position:-108px -341px} 
.flag-so{background-position:-108px -372px} 
.flag-sr{background-position:-108px -403px} 
.flag-st{background-position:-108px -434px} 
.flag-sv{background-position:-108px -465px} 
.flag-sy{background-position:-108px -496px} 
.flag-sz{background-position:-108px -527px} 
.flag-tc{background-position:-108px -558px} 
.flag-td{background-position:-108px -589px} 
.flag-tf{background-position:-108px -620px} 
.flag-tg{background-position:-108px -651px} 
.flag-th{background-position:-108px -682px} 
.flag-tj{background-position:-108px -713px} 
.flag-tk{background-position:-108px -744px} 
.flag-tl{background-position:-108px -775px} 
.flag-tm{background-position:-108px -806px} 
.flag-tn{background-position:-108px -837px} 
.flag-to{background-position:-108px -868px} 
.flag-tr{background-position:-108px -899px} 
.flag-tt{background-position:-108px -930px} 
.flag-tv{background-position:-108px -961px} 
.flag-zh-tw{background-position:-108px -992px} 
.flag-tz{background-position:-108px -1023px} 
.flag-ua{background-position:-108px -1054px} 
.flag-ug{background-position:-108px -1085px} 
.flag-um{background-position:-108px -1116px} 
.flag-en-us{background-position:-108px -1147px} 
.flag-uy{background-position:-108px -1178px} 
.flag-uz{background-position:-108px -1209px} 
.flag-va{background-position:-108px -1240px} 
.flag-vc{background-position:-108px -1271px} 
.flag-ve{background-position:-108px -1302px} 
.flag-vg{background-position:-108px -1333px} 
.flag-vi{background-position:-108px -1364px} 
.flag-vn{background-position:-108px -1395px} 
.flag-vu{background-position:-108px -1426px} 
.flag-wales{background-position:-108px -1457px} 
.flag-wf{background-position:-108px -1488px} 
.flag-ws{background-position:-108px -1519px} 
.flag-ye{background-position:-108px -1550px} 
.flag-yt{background-position:-108px -1581px} 
.flag-za{background-position:-108px -1612px} 
.flag-zm{background-position:-108px -1643px} 
.flag-zw{background-position:-108px -1674px}
Javascript 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
详细分析React 表单与事件
Jul 08 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 #Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 #Javascript
js/html光标定位的实现代码
Sep 23 #Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 #Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 #Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 #Javascript
js如何取消事件冒泡
Sep 23 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
angular的输入和输出的使用方法
2018/09/22 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python编写一个优美的下载器
2018/04/15 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
django query模块
2019/04/20 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python实现猜拳小游戏
2020/04/05 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
电脑租赁公司创业计划书
2014/01/08 职场文书
迟到检讨书900字
2014/01/14 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
嘉宾邀请函
2015/01/31 职场文书
运动会广播稿300字
2015/08/19 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript