继世界杯模拟抽签之后，公司又弄了个世界杯模拟晋级，在抽签真实结果的基础上，每组抽取两队，选出16强，16强中选出八强 。。。直至选出冠亚季军。
这个小程序 有两个步骤，第一步是选曲16强 第二步是晋级区 可详见 http://soccer.titan24.com/app/soccer/worldcupgame/index.php
其中用到了几个小技巧~比如选完16强 直接将屏幕滚动到 晋级区 判断已选的个数 并用一下代码 做屏幕滚动：
if($("#res").find(".sld").length==16){
window.scrollTo(0,620);
}
在选后一级之前，可以重新选择前一级，而开始选择后一级时，前一级的选择结果则固定不能重选 使用remove方法 去掉不可选的菜单
在最后阶段的选择中， 自动分别冠亚季军等。最后将所有结果 存到一个 JS对象中 代码如下：
// JavaScript Document by Trance
/*
*2010南非世界杯模拟晋级
*Mail:trance2005@163.com
*MSN:trancelover@live.cn
*QQ:397902738
*teamsel:晋级路上的球队 红色标志的球队
*top16:16强球队
*..........
*top3:冠亚季军
*Date:2009-12-01
*/
$(document).ready(function(){
var res={
teamsel:[],
top16:[],
top8:[],
top4:[],
top3:[]
}
$("#res").find("td").mouseover(function(){
var dl= $(this);
if(!dl.hasClass("sld") && dl.find(".hide").length<2){
var gx=parseInt(Math.floor(dl.offset().left))+66+"px";
var gy=parseInt(Math.floor(dl.offset().top))-8+"px";
var menu=dl.find("div");
var group=menu.attr("class");
var td=dl.find("strong").html();
var tarid;
menu.css({"top":gy,"left":gx}).show();
menu.find("li").click(function(e){
var li= $(e.target).parents("li")||$(e.target);
if(!li.hasClass("hide")){
var grade=li.attr("class");
tarid=group+grade;
$("."+group).find("."+grade).addClass("hide");
dl.addClass("sld");
menu.hide();
//alert(tarid);
$("#"+tarid).html(td);
if($("#res").find(".sld").length==16){
window.scrollTo(0,620);
}
return false;
}
return false;
})
return false;
}
return false;
}).mouseout(function(){
$(this).find("div").hide();
return false;
})
$("#t16").find("p").mouseover(function(){
if($("#res").find(".hide").length==64){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t16").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
var _p=mth.find(".cur");
var team=_p.html();
cur(_p,"prom","p");
$("#t8").find("p").eq(idx).html(team);
mth.addClass("cld");
//menu.remove();
return false;
})
}
return false;
})
$("#t8").find("p").mouseover(function(){
if($("#t16").find(".cld").length==8){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t8").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t16").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
$("#t4").find("p").eq(idx).html(team);
mth.addClass("cld");
//menu.remove();
return false;
})
}
//alert(idx);
return false;
})
$("#t4").find("p").mouseover(function(){
if($("#t8").find(".cld").length==4){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t4").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t8").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
var sibp=_p.siblings("p").html();
$("#t2").find("p").eq(idx).html(team);
$("#f34").find("p").eq(idx).html(sibp);
mth.addClass("cld");
//menu.remove();
return false;
})
}
//alert(idx);
return false;
})
$("#f34").find("p").mouseover(function(){
if($("#t4").find(".cld").length==2){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t4").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
$("#t0").find("p").eq(2).html(team);
mth.addClass("cld");
//menu.remove();
filldata();
return false;
})
}
//alert(idx);
return false;
})
$("#final").find("p").mouseover(function(){
if($("#t4").find(".cld").length==2){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t4").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
var sibp=_p.siblings("p").html();
$("#t0").find("p").eq(0).html(team);
$("#t0").find("p").eq(1).html(sibp);
mth.addClass("cld");
//menu.remove();
filldata();
return false;
})
}
//alert(idx);
return false;
})
$("#stepbtm p").mouseout(function(){
$(this).removeClass("hov");
})
function filldata(){
if($("#stepbtm").find(".prom").length==16){
res.teamsel.length=res.top8.length=res.top4.length=res.top3.length=res.top16.length=0;
for(var i=0; i<16; i++){
res.teamsel.push($("#stepbtm").find(".prom").eq(i).text());
}
for(var i=0; i<16; i++){
res.top16.push($("#t16").find("p").eq(i).text());
}
for(var i=0; i<8; i++){
res.top8.push($("#t8").find("p").eq(i).text());
}
for(var i=0; i<4; i++){
res.top4.push($("#t4").find("p").eq(i).text());
}
for(var i=0; i<3; i++){
res.top3.push($("#t0").find("p").eq(i).text());
}
var v = res.teamsel + '|' + res.top16 + '|' + res.top8 + '|' + res.top4 + '|' + res.top3;
$("#groupinfo").val(v);
//alert(res.top3)
}
}
//end of document.ready
})
/*标记当前*/
function cur(ele,currentClass,tag){
var ele= jQuery(ele)|| ele ;
var tag= tag || "";
var mark= currentClass || "cur";
ele.addClass(mark).siblings(tag).removeClass(mark);
}
*2010南非世界杯模拟晋级
*Mail:trance2005@163.com
*MSN:trancelover@live.cn
*QQ:397902738
*teamsel:晋级路上的球队 红色标志的球队
*top16:16强球队
*..........
*top3:冠亚季军
*Date:2009-12-01
*/
$(document).ready(function(){
var res={
teamsel:[],
top16:[],
top8:[],
top4:[],
top3:[]
}
$("#res").find("td").mouseover(function(){
var dl= $(this);
if(!dl.hasClass("sld") && dl.find(".hide").length<2){
var gx=parseInt(Math.floor(dl.offset().left))+66+"px";
var gy=parseInt(Math.floor(dl.offset().top))-8+"px";
var menu=dl.find("div");
var group=menu.attr("class");
var td=dl.find("strong").html();
var tarid;
menu.css({"top":gy,"left":gx}).show();
menu.find("li").click(function(e){
var li= $(e.target).parents("li")||$(e.target);
if(!li.hasClass("hide")){
var grade=li.attr("class");
tarid=group+grade;
$("."+group).find("."+grade).addClass("hide");
dl.addClass("sld");
menu.hide();
//alert(tarid);
$("#"+tarid).html(td);
if($("#res").find(".sld").length==16){
window.scrollTo(0,620);
}
return false;
}
return false;
})
return false;
}
return false;
}).mouseout(function(){
$(this).find("div").hide();
return false;
})
$("#t16").find("p").mouseover(function(){
if($("#res").find(".hide").length==64){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t16").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
var _p=mth.find(".cur");
var team=_p.html();
cur(_p,"prom","p");
$("#t8").find("p").eq(idx).html(team);
mth.addClass("cld");
//menu.remove();
return false;
})
}
return false;
})
$("#t8").find("p").mouseover(function(){
if($("#t16").find(".cld").length==8){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t8").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t16").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
$("#t4").find("p").eq(idx).html(team);
mth.addClass("cld");
//menu.remove();
return false;
})
}
//alert(idx);
return false;
})
$("#t4").find("p").mouseover(function(){
if($("#t8").find(".cld").length==4){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var idx=$("#t4").find(".match").index(mth);
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t8").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
var sibp=_p.siblings("p").html();
$("#t2").find("p").eq(idx).html(team);
$("#f34").find("p").eq(idx).html(sibp);
mth.addClass("cld");
//menu.remove();
return false;
})
}
//alert(idx);
return false;
})
$("#f34").find("p").mouseover(function(){
if($("#t4").find(".cld").length==2){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t4").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
$("#t0").find("p").eq(2).html(team);
mth.addClass("cld");
//menu.remove();
filldata();
return false;
})
}
//alert(idx);
return false;
})
$("#final").find("p").mouseover(function(){
if($("#t4").find(".cld").length==2){
var p=$(this);
cur(this,"cur","p");cur(this,"hov","p");
var mth=p.parents(".match");
var menu=mth.find(".menu");
var gx=parseInt(Math.floor(p.offset().left))+122+"px";
var gy=parseInt(Math.floor(p.offset().top))-8+"px";
$(".menu").hide();
menu.css({"top":gy,"left":gx}).show();
menu.find("a").click(function(){
$("#t4").find(".menu").remove();
var _p=mth.find(".cur");
cur(_p,"prom","p");
var team=_p.html();
var sibp=_p.siblings("p").html();
$("#t0").find("p").eq(0).html(team);
$("#t0").find("p").eq(1).html(sibp);
mth.addClass("cld");
//menu.remove();
filldata();
return false;
})
}
//alert(idx);
return false;
})
$("#stepbtm p").mouseout(function(){
$(this).removeClass("hov");
})
function filldata(){
if($("#stepbtm").find(".prom").length==16){
res.teamsel.length=res.top8.length=res.top4.length=res.top3.length=res.top16.length=0;
for(var i=0; i<16; i++){
res.teamsel.push($("#stepbtm").find(".prom").eq(i).text());
}
for(var i=0; i<16; i++){
res.top16.push($("#t16").find("p").eq(i).text());
}
for(var i=0; i<8; i++){
res.top8.push($("#t8").find("p").eq(i).text());
}
for(var i=0; i<4; i++){
res.top4.push($("#t4").find("p").eq(i).text());
}
for(var i=0; i<3; i++){
res.top3.push($("#t0").find("p").eq(i).text());
}
var v = res.teamsel + '|' + res.top16 + '|' + res.top8 + '|' + res.top4 + '|' + res.top3;
$("#groupinfo").val(v);
//alert(res.top3)
}
}
//end of document.ready
})
/*标记当前*/
function cur(ele,currentClass,tag){
var ele= jQuery(ele)|| ele ;
var tag= tag || "";
var mark= currentClass || "cur";
ele.addClass(mark).siblings(tag).removeClass(mark);
}