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 相关文章推荐
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
js 颜色选择插件
Jan 23 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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网站基础优化方法小结
2008/09/29 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
nodeJS微信分享
2017/12/20 NodeJs
layui实现动态和静态分页
2018/04/28 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python决策树和随机森林算法实例详解
2018/01/30 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
好的自荐信的要求
2013/10/30 职场文书
黄金搭档广告词
2014/03/21 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
小学体育教学随笔
2015/08/14 职场文书
大学生村官工作心得体会
2016/01/23 职场文书