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(){//鼠標(biāo)移入關(guān)閉icon事件
? ?col.setAttribute("src","../img/Delete.png");
}
col.onmouseout= function(){//鼠標(biāo)移出關(guān)閉icon事件
? ?col.setAttribute("src","../img/Close.png");
}
? ? ? ??
col.onclick= function(){//鼠標(biāo)點(diǎn)擊事件
colImage.style.display="none";
col.style.display="none";
}
con.onmouseover=function(){//鼠標(biāo)經(jīng)過事件
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="關(guān)閉" alt=""></div>
? <div class="showPic" id="showPic"><img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--圖片可以自定義-->
</div>
</body>
</html>
2019-07-24
1.關(guān)閉icon我采用的是兩張不一樣的圖片。
2.建議使用案例方法，使用背景圖片引入（消耗資源更?。?/p>