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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jquery插件格式实例分析
Jun 16 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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字符串的编码问题的详细介绍
2013/04/27 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
php自定义时间转换函数示例
2016/12/07 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
JavaScript鼠标特效大全
2016/09/13 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
简历中的自我评价范文
2014/02/05 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
《白鹅》教学反思
2014/04/13 职场文书
活动宣传策划方案
2014/05/23 职场文书
2015最新民情日记范文
2015/06/26 职场文书
医院保洁员管理制度
2015/08/05 职场文书
军训决心书范文
2015/09/22 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang