done!
<!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 {
/*利用css的positiont属性定位广告显示的位置*/
position: fixed;
bottom: 0;
right: 0;
}
.clickMe {
height: 32px;
background: #CCC;
line-height: 32px;
}
.clickMe p{
position: relative;
height: 32px;
line-height: 32px;
text-align: center;
}
.showPic {
/* 初始为隐藏，可以改变初始效果*/
display: block;
}
.tipCon .clickMe {
position: relative;
}
/* .clickMe a {
background: url(http://img1.sycdn.imooc.com//542286f8000186a604300150.jpg) no-repeat -399px -19px;
width: 16px;
height: 16px;
display: none;
position: absolute;
top: 5px;
right: 5px;
} */
.clickMe .closeBtn{
position: absolute;
right: 0;
top: 0;
}
/* .clickMe .closeBtn:hover {
background-position: -343px -19px;
} */
</style>
<script>
function $(id){
return typeof id === "string"?document.getElementById(id):id;
}
window.onload = function(){
//定义传参控件
var col=$("closeBtn");
var colImage=$("showPic");
var con=$("clickMe");
col.onmouseover= function(){//鼠标移入关闭icon事件
col.setAttribute("src","../img/Delete.png");
}
col.onmouseout= function(){//鼠标移出关闭icon事件
col.setAttribute("src","../img/Close.png");
}
col.onclick= function(){//鼠标点击事件
colImage.style.display="none";
col.style.display="none";
}
con.onmouseover=function(){//鼠标经过事件
colImage.style.display="block";
col.style.display="block";
}
}
</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"><p>猜猜我有啥？</p><img class="closeBtn" id="closeBtn" src="../img/Close.png" title="关闭" alt=""></div>
<div class="showPic" id="showPic"><img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--图片可以自定义-->
</div>
</body>
</html>
