没有看到关闭按钮在哪里~~
除了少了两个点以外，可能还有别的问题，请指出
5 回答
<!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;right:0px;bottom:0px; /*利用css的positiont属性定位广告显示的位置*/
}
.clickMe {
height: 24px;
background: #CCC;
line-height: 24px;
}
.clickMe a {
background: url(http://img1.sycdn.imooc.com//542286f8000186a604300150.jpg) no-repeat -399px -19px;
width: 16px;
height: 16px;
position: absolute;
display: none;
top: 5px;
right: 5px;
}
.clickMe a:hover {
background-position: -343px -19px;
display: block;
}
.showPic {
display:none; /* 初始为隐藏，可以改变初始效果*/
}
.clickMe {
position: relative;
}
.show{display:block;}
.hide{display:none;}
</style>
<script>
window.onload = function(){
//定义传参控件
var $=function(id){
return document.getElementById(id)
}
$("clickMe").onmouseover= function(){//鼠标移入事件
$("showPic").className="show";
$("closeBtn").style.display="block";
}
$("closeBtn").onclick= function(){//鼠标点击事件
$("showPic").className="hide";
$("closeBtn").className="hide";
}
}
</script>
</head>
<body>
<div class="content"><img src="http://img1.sycdn.imooc.com//537d9b860001795a09601700.jpg" /></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="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--图片可以自定义-->
</div>
</body>
</html>
举报
0/150
提交
取消
