交作业！！（素材不一样，但原理一样的）
<!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;
width: 400px;
}
.showPic {
position: relative;
display: none;
width: 400px;
height: 300px;
}
.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");
var moveHeight=0;
var maxHeight=$("imagePic").height;
var timer1;
var timer2;
//定义传参控件
mouse_in();
mouse_out();
mouse_click();
mouse_over();
function addUp(){
if(moveHeight<maxHeight){
moveHeight+=5;
$("showPic").style.height=moveHeight+"px";
$("showPic").style.display="block";
timer1=setTimeout(addUp,10);
}else if(moveHeight==maxHeight){
$("showPic").style.height=moveHeight+"px";
$("showPic").style.display="block";
timer1=setTimeout(addDown,3000);
}else if(moveHeight==0){
// $("showPic").style.display="none";
maxHeight=moveHeight+"px";
}
}
function addDown(){
if(moveHeight>50){
moveHeight-=5;
$("showPic").style.height=moveHeight+"px";
$("showPic").style.display="block";
timer1=setTimeout(addDown,20);
}else{
$("imagePic").setAttribute("src","../img/image.jpg");
// $("showPic").style.marginBottom=0;
}
}
timer2=setTimeout(addUp,1000);
function mouse_in(){
$("closeBtn").onmouseover= function(){//鼠标移入关闭icon事件
$("closeBtn").setAttribute("src","../img/Delete.png");
}
}
function mouse_out(){
$("closeBtn").onmouseout= function(){//鼠标移出关闭icon事件
$("closeBtn").setAttribute("src","../img/Close.png");
}
}
function mouse_click(){
$("closeBtn").onclick= function(){//鼠标点击事件
$("showPic").style.display="none";
$("closeBtn").style.display="none";
$("clickMe").style.bottom=0+"px";
}
}
function mouse_over(){
if(timer1){
clearTimeout(timer2);
}
$("clickMe").onmouseover=function(){//鼠标经过事件
$("showPic").style.display="block";
$("closeBtn").style.display="block";
$("imagePic").setAttribute("src","../img/images.jpg");
console.log($("showPic").height);
$("showPic").style.bottom=250+"px";
$("clickMe").style.bottom=250+"px";
}
}
}
</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 id="imagePic" src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--图片可以自定义-->
</div>
</body>
</html>
