欧洲冠军杯决赛要开打了，公司结合 FIFAONLINE2 做了个活动专题，其中一个效果是 选择自己喜欢的球员，正好这个游戏也是我挺喜欢玩的游戏，
把这个脚本写了一下，主要功能如下：
1.点击图标选择相应位置上的人员
2.相应键盘操作 上选 下选 回车确定等 （修正了循环选择效果）
3.人员选重时的提示
4.提交前的验证 和 提示
这次在原有的基础上，修改了不少地方，比如循环往复的菜单，之前的版本没有搞定， 先前的判断是 var nxt=_cdul.next("li") ? _cdul.next("li") : _ul.find("li:first");
总是不能取到后面的值，alert 显示为null ,很是奇怪。反复试验 改为
var nxt=_cdul.next("li").html() ? _cdul.next("li") : _ul.find("li:first"); 就行了， 所以有的时候判断一个元素是否存在还是得看看它的内容。
另外一个问题就是IE 对position的解析，果然很恶心。。害的我写了一大堆的hack 去搞定它。导致CSS相当的难看。
但是最终还是搞定了。
代码很冗长 有兴趣的同学就看下吧：冗长的效果代码
$(document).ready(function(){
var t=false;
var target;
var hidinput;
var _ul;
//标记当前
function cur(ele){
ele=$(ele)? $(ele):ele;
ele.addClass("cur").siblings().removeClass("cur");
}
$("#play").find("span").click(
function(){ //点击调出相应列表
var _this=$(this);
var y , x;
x=parseInt(_this.css("left"))+10;
var top=parseInt(_this.css("top"));
_ul=_this.siblings("ul.sel_ply");
//默认标记第一个 方便响应键盘
if(top<140){ //下面的列表向上显示
y=top+parseInt(_this.height())+24+"px";
_ul.css({top:y,left:x,zIndex:10000}).show();
cur(_ul.children("li:first"));
}else{
y= top-parseInt(4+_ul.height())+"px";
_ul.css({top:y,left:x,zIndex:10000}).show();
cur(_ul.children("li:first"));
}
$("ul.sel_ply").not(_ul).hide();
//_ul.find("em").html(_this.attr("title"));
target=$(this);//点哪个就给哪个赋值
hidinput=$(this).next("input"); //输入框也同时填上值
}
)
$("#play").find("li").mouseover(
function(){
cur(this);
})
.click(function(){ //选中赋值 同时给隐藏的input赋值
hidinput.focus();
var sw=false;
var _this=$(this);
var aim=_this.html();
var span=$("#play").find("span");
//var list=$("#play").find("li");
for(i=0; i<span.length; i++){
if(span.eq(i).html()==aim) {sw=1; break;}
}
if(!sw){ //没有重的就赋值
target.html(aim).addClass("cur").removeClass("war");
hidinput.val(aim);
}else{ //如果有重的 就提示
var temp=target.attr("title");
var warn=$("<strong style='color:#f60'>选重啦!</strong>");
target.html("");
warn.appendTo(target);
setTimeout(function(){
warn.hide();
target.html(temp).removeClass("cur");
},1000);
}
hidelist();
})
var hidelist=function hideul(){ //隐藏所有列表 取消选择状态
$("#play").find("ul").hide();
$("#play li").removeClass("cur");
}
function countdown(){ //下选 键盘down键
var _cdul=_ul.children("li.cur");
var nxt=_cdul.next("li").html() ? _cdul.next("li") : _ul.find("li:first");
cur(nxt);
}
function countup(){ //上选 键盘up键
var _cdul=_ul.children("li.cur");
var prv=_cdul.prev("li").html() ? _cdul.prev("li") : _ul.find("li:last");
cur(prv);
}
function sure(){ //回车确定 赋值
_ul.children("li.cur").click();
}
$("#play").mousedown(function(event){
event=event||window.event;
if(event.which==3){ // 1 == left; 2 == middle; 3 == right 右键隐藏
hidelist();
}
}).hover(function(){ //离开延时隐藏 1.5秒默认
if(t){
clearTimeout(t);
}
},function(){
t=setTimeout(hidelist,1500);
}
)
$(document).keydown(function(event){ //用 $(document)来相应键盘事件
event = event || window.event;
event.preventDefault();
switch(event.keyCode){
case 27: hidelist();
break;
case 38: countup();
break;
case 40: countdown();
break;
case 39: countdown();
break;
case 37: countup();
break;
case 13: sure();
break;
}
})
//验证表单和提交
$("#sub").click(function(){
var span=$("#play span");
var swh=false;
span.each(function(i){
var val=span.eq(i).html();
if(val=="门将"||val=="前锋"||val=="后卫"||val=="中场"||val==""){
span.eq(i).addClass("war");
swh=true;
}
})
if(swh){
$("#info").html("您有未选的项目(以黄色标出),请选择！").show();
setTimeout(function(){$("#info").fadeOut(500)},1500);
}else{
$("i_sel").submit();
}
})
//隔行换色
$("#datab table").find("tr:even").addClass("even");
var over=function(){
$(this).addClass("hovr");
}
var out=function(){
$(this).removeClass("hovr");
}
$("#datab table").find("tr").hover(over, out)
//切换
function tab(id_tab,tag_tab,id_con,tag_con){
$(id_tab).find(tag_tab).each(function(i){
$(id_tab).find(tag_tab).eq(i).click(
function(){
cur(this);
$(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
}
)
})
}
//End of docoment.ready