用js实现IBM100年庆徽标竞猜功能

页面查看地址：http://www.e-works.net.cn/report/ibm100/ibm100.html

js代码：function setanswernumber(isanswer,index,divindex)
{
if(parseInt(document.getElementById("answernum").innerHTML)==8)
{
alert('恭喜你全部回答正确！请填写您的个人联系信息，以便参加我们的抽奖');
BOX_remove('messdiv0');
$('#pic'+index).hide();
$('#nav').hide();
BOX_show('messdiv10');
document.getElementById("errornum").innerHTML='0';
document.getElementById("answernum").innerHTML='0';
var imgs=$('#pics_3d img')
for (var i=0;i<imgs.length;i++ ) {
$('#pic'+i).show();
$("#nav_"+i).show();
}
Nav_3D.ready();
}
else
{
if(isanswer==0)
{
$('#pic'+index).hide();
$('#nav_'+index).hide();
var rightnums=parseInt(document.getElementById("answernum").innerHTML)+1;
$('#answernum').html(rightnums);
document.getElementById("question").innerHTML='';
BOX_remove('messdiv0');
alert('恭喜你回答正确！你已经回答对'+rightnums+'题,继续加油！');
}
else
{
if(parseInt(document.getElementById("errornum").innerHTML)==2)
{
alert('回答错误！您已经答错3次，竞猜重新开始！');
document.getElementById("errornum").innerHTML='0';
document.getElementById("answernum").innerHTML='0';
BOX_remove('messdiv0');
//var imgs=document.getElementById("pics_3d").getElementsByTagName("img");
var imgs=$('#pics_3d img')
for (var i=0;i<imgs.length;i++ ) {
$('#pic'+i).show();
$("#nav_"+i).show();
}
Nav_3D.ready();
}
else
{
alert('对不起，回答错误！建议您到"IBM大事年表"中寻找正确答案');
var errornum=parseInt(document.getElementById("errornum").innerHTML)+1;
document.getElementById("errornum").innerHTML=errornum;
}
}
}
}
Item=function(UI){
 this.angle=0;
 this.UI=UI;
 this.update();
};
Item.ini={

 axle_w:400,
 axle_h:10,
 cen_x:500,
 cen_y:260

};
Item.prototype.update=function(){
 var J=this.UI.style,C=Item.ini,W=C.axle_w,H=C.axle_h,X=C.cen_x,Y=C.cen_y;
 var angle=this.angle/180*Math.PI;
 var left=Math.cos(angle)*W+X;
 var top=Math.sin(angle)*H+Y;
 var A=this.angle>270?this.angle-360:this.angle;
 var size=400-Math.abs(90-A)*3;
 this.UI.width=Math.max(size,120);
 var opacity=Math.max(10,size-180);
 J.filter='alpha(opacity='+opacity+')';
 J.opacity=opacity/100;
 J.left=(left-this.UI.offsetWidth/2)+'px';
 top=(top-this.UI.offsetHeight)+'px';
 J.top=top;
 J.zIndex=parseInt(size*100);

};

Nav_3D={

 items:[],
 dir:1,
 index:0,
 imageindex:0,
 hover:false,
 add:function(item){
  this.items.push(item);
  item.index=this.items.length-1;
  item.imageindex=0;
  item.UI.οnclick=function (){
   var J=item.angle,M=Nav_3D;
   if(M.uping)return;
   if(J==90){   
   BOX_show('messdiv0','question'+item.index);  
   };
   M.wheel_90(item);
   M.index=item.index;
   M.imageindex=item.imageindex;
  };
  item.UI.οnmοuseοver=function (){
   if(item.angle==90){
    Nav_3D.hover=true;   
    clearTimeout(Nav_3D.autoTimer);
    this.style.cursor='pointer';
   };
  };
  item.UI.οnmοuseοut=function (){
   if(item.angle==90){
    Nav_3D.hover=false;
    Nav_3D.auto();
   };
  };
  return this;
 },
 wheel_90:function(hot){
  if(this.uping)return;
  this.uping=true;
  var This=this;
  this.timer=setInterval(function (){
   clearTimeout(This.autoTimer);
   var A=hot.angle;
   This.dir=A<270&&A>90?-1:1;
   if(A==90){
    clearInterval(This.timer);
    This.uping=false;
    This.onEnd(hot);
   }
   if(A>270)A-=360;
   var set=Math.ceil(Math.abs((90-A)*0.1));
   for (var i=0;i<This.items.length;i++ ) {
    var J=This.items[i];
    J.angle+= (set*This.dir);
    J.update();
    if(J.angle>360)J.angle-=360;
    if(J.angle<0)J.angle +=360;
   };
  },15);
 },

 ready:function(){
  var J=this.items,step=parseInt(360/J.length);
  for (var i=0;i<J.length;i++) {J[i].angle=i*step+90;}
  this.wheel_90(this.items[0]);
  Nav_3D.prevHot=this.items[0].UI;
  Nav_3D.setHot();
   
 },

 setHot:function(isHot){
  if(!this.prevHot)return;
  with(this.prevHot.style){
   borderColor=isHot!==false?'#CC0000':'#00CCFF';
   cursor=isHot!==false?'default':"pointer";
  };
  return this;
 },
 
 auto:function(){
 if(document.getElementById("messdiv0").innerHTML.indexOf("IBM")<0)//当弹出层时图片停止滚动
 {
  this.index--;
  if(this.index<0)this.index=this.items.length-1;  
 var navli =document.getElementById("nav").getElementsByTagName("li");
  for (var j=0; j<navli.length; j++) {
  
    navli[j].className = this.index == j ? 'cur' : '';
 }
     var J=this.items[this.index];
  this.setHot(false).prevHot=J.UI;
  this.setHot();
  this.wheel_90(J);
  }
 },
next:function(){
this.imageindex++;
if(this.imageindex>this.items.length-1) this.imageindex=0;
var navli =document.getElementById("nav").getElementsByTagName("li");
  for (var j=0; j<navli.length; j++) {
  
    navli[j].className = this.imageindex == j ? 'cur' : '';
 }
 var J=this.items[this.imageindex];
  this.setHot(false).prevHot=J.UI;
  this.setHot();
  this.wheel_90(J);  
 },
  move : function (picindex) {
 var navli =document.getElementById("nav").getElementsByTagName("li");
 for (var j=0; j<navli.length; j++) {
    navli[j].className = picindex == j ? 'cur' : '';
 }
 var J=this.items[picindex];
  this.setHot(false).prevHot=J.UI;
  this.setHot();
  this.wheel_90(J);
  }
 ,
onEnd:function(hot){
  if(this.hover){
   return setTimeout(function(){Nav_3D.onEnd();},200);
  }
  this.autoTimer=setTimeout(function(){Nav_3D.next();},2000);
 
 },
  onStop:function(){
    Nav_3D.hover=true;
    clearTimeout(Nav_3D.autoTimer);
    
    }

};
var imgs=$("#pics_3d img")
for (var i=0;i<imgs.length;i++ ) {
 Nav_3D.add(new Item(imgs[i]))
}
Nav_3D.ready();
//以下函数跟弹出层有关
function BOX_show(e,q)//显示
{
   if(document.getElementById(e)==null)
    {
        return ;
    }
    //var selects = document.getElementsByTagName('select');
    //for(i = 0; i < selects.length; i++)
    //{
    //    selects[i].style.visibility = "hidden";
   // }
ShowQuestion(e,q);
    BOX_layout(e);
    window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置
    window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置
 document.onkeyup = function(event)
 {
  var evt = window.event || event;
  var code = evt.keyCode?evt.keyCode : evt.which;
  //alert(code); 
  if(code == 27)
  {
   BOX_remove(e);
  } 
 }
}

function BOX_remove(e)//移除
{
    window.onscroll = null;
    window.onresize = null;
    document.getElementById('BOX_overlay').style.display="none";
    document.getElementById(e).style.display="none";
    var selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++)
    {
        selects[i].style.visibility = "visible";
    }
 
 Nav_3D.auto();
}

function BOX_layout(e)//调整位置
{
    var a = document.getElementById(e);
 if (document.getElementById('BOX_overlay')==null)//判断是否新建遮掩层
    {
    
        var overlay = document.createElement("div");
        overlay.setAttribute('id','BOX_overlay');
  
        //overlay.οnclick=function(){BOX_remove(e);};
        //a.parentNode.appendChild(overlay);
  document.body.appendChild(overlay);
    }
 
 document.getElementById('BOX_overlay').οndblclick=function(){BOX_remove(e);};
    //取客户端左上坐标，宽，高
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
   
    var clientWidth;
    if (window.innerWidth)
    {
        clientWidth = window.innerWidth;
       // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
    }
    else
    {
        clientWidth = document.documentElement.clientWidth;
    }
   
    var clientHeight;
    if (window.innerHeight)
    {
        clientHeight = window.innerHeight;
        //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
    }
    else
    {
        clientHeight = document.documentElement.clientHeight;
    }
   
    var bo = document.getElementById('BOX_overlay');
    bo.style.left = scrollLeft+'px';
    bo.style.top = scrollTop+'px';
    bo.style.width = clientWidth+'px';
    bo.style.height = clientHeight+'px';
    bo.style.display="";
    //Popup窗口定位
    a.style.position = 'absolute';
    a.style.zIndex=999;
    a.style.display="";
    //a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
    //a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
}

function HiddenButton(e)
{
    e.style.visibility='hidden';
    e.previousSibling.style.visibility='visible'
}
//给层填充内容
    var AjCache=new Object(); 
  function ShowQuestion(tagId,t)
  {
      var url = t+".htm";
        if(AjCache[url] == null)
       {      
           $.ajax({
               url: url,  
               type: 'GET',   
               success: function(newsstring){ 
      $("#question").html(newsstring); 
     // document.getElementById("question").innerHTML=newsstring;    
               //缓存到客户端 url做为查询值的键
               AjCache[url]=newsstring;
              }
           });
  }      
       else
       {
    document.getElementById("question").innerHTML=AjCache[url];
    }
 }