我有这么一段JS代码:
<!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"> </div>
</div>
</body>
</html>其中所要引用的两个文件如下:
global.css
/************************ CSS Document *********************************/
/*文件名:global.css*/
/*文件运用范围:工会系统所有页面的公用样式*/
/*开发时间:2009年4月6日*/
/*完成时间:2009年4月6日*/
/**********************责任负责人:付为志(coco fish)******************/
*{
font-size:9pt; line-height:150%;
/*-------字体类型:正常 字体大小/行高 字体-------*/
}
html{
margin:0px;
padding:0px;
text-align:center;
}
body{
margin:0;padding:0;
/*-------消除外边距和内补丁-----*/
color:#333;
text-align:center;
/*-------使FF文档居中----------*/
}
a{
color:#333;
text-decoration:none;
}a:hover{
color:#000;
text-decoration:underline;
}
a img,img{
border:none;
margin:0;
padding:0; /*-------去除图片的边框和补丁和边距---------*/
}
li,ul,ol{
list-style:none;
padding:0px;
margin:0px;
}blockquote,form,input,p,div,label,textarea,font,dl,dd,dt,fieldset,caption,em,embed,frame,frameset,iframe,legend
,optgroup,option,select,marquee,hr{
padding:0px;
margin:0px;
font-size:9pt;
}
h1,h2,h3,h4,h5,h6{
padding:0px;
margin:0px;
}
tr,td,table,tbody,thead,tfoot,th{
font-size:9pt;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
/*-------清除浮动---------*/
.left{
float:left;
}
.right{
float:right;
}
.inline{ display:inline;}
/*--------------网站基本颜色和粗细------------------------*/.hidden{ font-size:1px; overflow:hidden; height:1px;}
jquery.js
jquery.js文件地址:http://www.ezz.cc/templets/default/gameexpro/js/jquery.js
我想问的问题是在第一个文件中 点澳大利亚是没有弹出显示窗口的,如果我要添加,应该如何来做?这段代码看的不是很明白请高人指教一下,谢谢了啊
<!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"> </div>
</div>
</body>
</html>其中所要引用的两个文件如下:
global.css
/************************ CSS Document *********************************/
/*文件名:global.css*/
/*文件运用范围:工会系统所有页面的公用样式*/
/*开发时间:2009年4月6日*/
/*完成时间:2009年4月6日*/
/**********************责任负责人:付为志(coco fish)******************/
*{
font-size:9pt; line-height:150%;
/*-------字体类型:正常 字体大小/行高 字体-------*/
}
html{
margin:0px;
padding:0px;
text-align:center;
}
body{
margin:0;padding:0;
/*-------消除外边距和内补丁-----*/
color:#333;
text-align:center;
/*-------使FF文档居中----------*/
}
a{
color:#333;
text-decoration:none;
}a:hover{
color:#000;
text-decoration:underline;
}
a img,img{
border:none;
margin:0;
padding:0; /*-------去除图片的边框和补丁和边距---------*/
}
li,ul,ol{
list-style:none;
padding:0px;
margin:0px;
}blockquote,form,input,p,div,label,textarea,font,dl,dd,dt,fieldset,caption,em,embed,frame,frameset,iframe,legend
,optgroup,option,select,marquee,hr{
padding:0px;
margin:0px;
font-size:9pt;
}
h1,h2,h3,h4,h5,h6{
padding:0px;
margin:0px;
}
tr,td,table,tbody,thead,tfoot,th{
font-size:9pt;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
/*-------清除浮动---------*/
.left{
float:left;
}
.right{
float:right;
}
.inline{ display:inline;}
/*--------------网站基本颜色和粗细------------------------*/.hidden{ font-size:1px; overflow:hidden; height:1px;}
jquery.js
jquery.js文件地址:http://www.ezz.cc/templets/default/gameexpro/js/jquery.js
我想问的问题是在第一个文件中 点澳大利亚是没有弹出显示窗口的,如果我要添加,应该如何来做?这段代码看的不是很明白请高人指教一下,谢谢了啊
解决方案 »
- this.getColumnModel is not a function ExtJs导出excel问题,求救
- 将以下代码贴到浏览器地址栏中,就会出现牛逼的效果!
- 我想为 Number 类修改 toString()方法,为何总是不成功呢?
- 一个关于打印的问题!
- google的这行滚动代码 为什么要加个span????
- 简单的javascript消除游戏
- 网页装载时怎么检查select,text的值不能为空?(用javascript自动检查)
- 给事件传递函数的问题
- 请教如何弹出一个输入框,然后得到输入的内容,保存到一个变量中去!
- 请问怎样中断程序的执行
- JQ写层的显示和隐藏的问题
- javascript遍历无限级html标签!!!
$(dom).bind({
click: function()
{
}bind函数可以自定义,绑定click函数
each遍历节点click: function()
click选中
$(dom).bind({
mouseover: function()
{
}
绑定鼠标移动事件