我想实现类似世博会点网页上某个区域会弹出一个窗口的,网络上找了段实例代码,运行却没有出现这个效果,请各位Js高手看看,到底在代码中出现了什么问题啊?
[code=HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>蜀门公会频道-易众网</title>
<link href="global.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
 
 $(".shibo_map .hasing").each(function(index,dom){
  $(dom).bind({
   click: function()
   {
      x=event.x;//获取当前时间的鼠标位置
      y=event.y;
      $(this).addClass("selected").siblings().removeClass('selected');
      $(".showBox_bg").css({"display":"block"});
      $(".showBox").css({"display":"block"});
      if(x>323)
      {     
        if(y>190)
     {
      $(".showBox_bg").css({"top":parseInt(y-140),"left":parseInt($(this).css("left"))-194});
      $(".showBox").eq(index).css({"top":parseInt(y-140),"left":parseInt($(this).css("left"))-194}).siblings(".showBox").css({"display":"none"}); 
     }
     else
     {
      $(".showBox_bg").css({"top":parseInt(y+20),"left":parseInt($(this).css("left"))-194});
      $(".showBox").eq(index).css({"top":parseInt(y+20),"left":parseInt($(this).css("left"))-194}).siblings(".showBox").css({"display":"none"}); 
     }      }
      else
      {
        if(y>190)
     {
      $(".showBox_bg").css({"top":parseInt(y-140),"left":parseInt($(this).css("left"))}); 
         $(".showBox").eq(index).css({"top":parseInt(y-140),"left":parseInt($(this).css("left"))}).siblings(".showBox").css({"display":"none"}); 
     }
     else
     {
      $(".showBox_bg").css({"top":parseInt(y+20),"left":parseInt($(this).css("left"))}); 
         $(".showBox").eq(index).css({"top":parseInt(y+20),"left":parseInt($(this).css("left"))}).siblings(".showBox").css({"display":"none"}); 
     }
      }
   }
  }); 
 })
 $(".CLOSE_showBox").each(function(index,dom){
  $(dom).bind({
   click: function()
   {
    $(this) .parent().parent().css({"display":"none"});
    $(".showBox_bg").css({"display":"none"});
    $(".shibo_map .hasing").removeClass("selected");
   }
  })
 })})
</script>
</head>
<body>
<style type="text/css">
.shibo_map{width:646px; position:relative; margin:40px auto;height:387px; background:url(map.jpg) top center no-repeat;}
.shibo_map span{ display:block; position:absolute; width:51px; height:19px; line-height:19px; text-align:center; z-index:8; cursor:pointer;}
.shibo_map span.selected{ background:url(local.gif) top center no-repeat; color:#fff;}
.showBox{ position:absolute; display:none; width:245px; height:115px;z-index:68;}
.showBox_bg{ position:absolute; display:none; width:245px; height:115px;z-index:58;background-color:#000000; filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;}
.shibo_title{ padding:0px 10px; height:35px;}
.shibo_title h4{ float:left; line-height:35px; font-weight:normal; font-size:16px; color:#fff;}
.shibo_title .CLOSE_showBox{ float:right; margin-top:7px; cursor:pointer;}
.shibo_content{ padding:0px 10px;clear:both;}
.shibo_content img{ width:70px; height:50px; border:1px solid #ccc; margin-right:10px;}
.shibo_content p{ color:#fff; text-align:left; line-height:180%;}</style>
<div class="shibo_map" >
 <span class="hasing" style="left:16px; top:120px;">加拿大</span>
 <span class="hasing" style="left:521px; top:234px;">中国</span>
 <span class="hasing" style="left:540px; top:200px;">韩国</span>
 <span style="left:571px; top:248px;">台湾</span>
 <span class="hasing" style="left:573px; top:220px;">日本</span>
 <span style="left:508px; top:292px;">新加坡</span>
 <span style="left:573px; top:352px;">澳大利亚</span>
 <span class="hasing" style="left:513px; top:125px;">俄罗斯</span>
 <span class="hasing" style="left:356px; top:202px;">德国</span>
 <span class="hasing" style="left:263px; top:94px;">冰岛</span>
 <span style="left:245px; top:181px;">英国</span>
 <span style="left:274px; top:202px;">法国</span>
 <span class="hasing" style="left:79px; top:214px;">美国</span>
 <span class="hasing" style="left:328px; top:108px;">瑞典</span>
    <div class="showBox" >
     <div class="shibo_title"><h4 class="left">加拿大</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:《无冬之夜》《星球大战:古老共和国武士》        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">中国</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:征途 剑侠3  神兵传奇九阴真经梦幻西游        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">韩国</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:传奇  剑灵  七龙珠OL  穿越火线仙境传说        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">日本</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:最终幻想OL  怪物猎人合金装备   SD敢达        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">俄罗斯</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:亚洛斯Online        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">德国</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:遗弃王国的秘密        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">冰岛</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:EVE        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">美国</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:魔兽世界  极品飞车OL  孢子魔兽争霸使命召唤        </p>
        </div>
    </div>
    <div class="showBox">
     <div class="shibo_title"><h4 class="left">瑞典</h4><img class="CLOSE_showBox" align="middle" src="close.gif" /></div>
        <div class="shibo_content">
        <img src="qq.jpg" align="left" />
        <p>主要游戏:凡尘        </p>
        </div>
    </div>   
    <div class="showBox_bg">&nbsp;</div>
</div>
</body>
</html>
马上给分的,谢谢~~~

解决方案 »

  1.   

    <script language="javascript" src="jquery.js" type="text/javascript"></script>
    你有这个文件吗
      

  2.   

    没有这个文件啊 这个文件在出现这个代码的帖子里没有 哪里可以得到这个文件啊?
    这篇帖子的地址:http://blog.sina.com.cn/s/blog_66af238a0100ifc8.html
    大家也可以看看 参考参考 或许哪天有用
      

  3.   

    效果做出来不是很难,但是楼主给的代码我无法调试,引用不到楼主的CSS或者js
      

  4.   

    那有这个效果的网站地址是:http://www.ezz.cc/gameexpo/
    请问能把这两个文件给引用或者当下来吗?
      

  5.   

    样式表和JS脚本用任何页面检查插件都能找到LZ回去好好学习下吧,没有贬义,但你现在的水平接近于无知
      

  6.   

    lz代码很多,、
    你自己用alert()来调试啊