style.display="block"与.ame="show"设置时。第二个不出现？？？？？？？？
代码1：<!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=utf-8" />
<title>右下角弹窗</title>
<style>
*{margin:0;padding:0;}
.content{width:960px;height:1440px;background:#ccc;color:#000;font-size:36px;text-align:center;margin:0 auto;position:relative;}
.tipCon{position:fixed;background:#efefef;color:#000;font-size:16px;text-align:center;bottom:0;right:0;}
.clickMe{height:24px;background:#CCC;line-height:24px;}
.showPic{display:none;}
.clickMe{position:relative; }
.clickMe a{background:url(images/icon.jpg) no-repeat -399px -19px;width:16px;height:16px;display:none;position:absolute; top:5px; right:20px;}
.clickMe a:hover{background-position:-343px -19px;}
</style>
</head>
<body>
<div class="content">网页内容</div>
<div class="tipCon" id="tipCon">
<div class="clickMe" id="clickMe">猜猜我有啥？<a href="javascrip:void(0);" id="closeBtn"></a></div>
<div class="showPic" id="showPic"><img src="images/snow.gif" /></div>
</div>
<script>
window.onload = function(){
/*var TipBox = document.getElementById("tipCon");
var ClickMe = document.getElementById("clickMe");
var showPic = document.getElementById("showPic");
var closeBtn = document.getElementById("closeBtn");
ClickMe.onmouseover = function(){
showPic.style.display = 'block';
closeBtn.style.display = 'block';
}
closeBtn.onclick = function(){
showPic.style.display = 'none';
closeBtn.style.display = 'none';
}
*/
var get_1 =function (id) {
// 获取元素的函数
return document.getElementById(id);
}
get_1("clickMe").onmouseover=function(){
get_1("showPic").style.display="block";
get_1("closeBtn").style.display="block";
}
get_1("closeBtn").onclick=function(){
get_1("showPic").style.display="none";
get_1("closeBtn").style.display="none";
}
}
</script>
</body>
</html>代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>右下角广告特效</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.content{
width: 960px;
height: 1440px;
background: #ccc;
margin: 0 auto;
text-align: center;
font-size: 34px;
color: #000;
position: relative;
}
.tipCon{
position: fixed;/*对广告进行定位*/
bottom:0;
right: 0;
font-size: 16px;
background: #efefef;
color: #000;
text-align: center;
}
.clickMe{
height: 24px;
background-color: #ccc;
line-height: 24px;
}
.showPic{
display: none; /*初始为隐藏*/
}
.clickMe{
position: relative;
}
.clickMe a{
background:url("images/icon.jpg") no-repeat -399px -19px;
width: 16px;
height: 16px;
display: none;
position: absolute;
top: 5px;
right: 5px;
}
.clickMe a:hover{
background-position: -344px -19px;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var get_1 =function (id) {
// 获取元素的函数
return document.getElementById(id);
}
get_1("clickMe").onmouseover=function(){
get_1("showPic").className="show";
get_1("closeBtn").className="show";
}
get_1("closeBtn").onclick=function(){
get_1("showPic").className="hide";
get_1("closeBtn").className="hide";
}
}
</script>
</head>
<body>
<div>
<img src="http://img1.sycdn.imooc.com//537d9b860001795a09601700.jpg" alt="bgphoto">
</div>
<div id="tipCon">
<div id="clickMe">
猜猜我是啥？<a href="javascript:void(0);" id="closeBtn"></a>
</div>
<div id="showPic">
<img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" alt="adphoto"/>
</div>
</div>
</body>
</html>
为什么代码1可以运行时出现关闭按钮？？？但是代码2关闭按钮出不来？？？？？？？
