                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁廣告特效

交作業(yè)！?。ㄋ夭牟灰粯樱硪粯拥模?/h1>
<!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(){//鼠標(biāo)移入關(guān)閉icon事件
? ?$("closeBtn").setAttribute("src","../img/Delete.png");
}
}

function mouse_out(){
$("closeBtn").onmouseout= function(){//鼠標(biāo)移出關(guān)閉icon事件
? ?$("closeBtn").setAttribute("src","../img/Close.png");
}
}

function mouse_click(){
$("closeBtn").onclick= function(){//鼠標(biāo)點(diǎn)擊事件
$("showPic").style.display="none";
$("closeBtn").style.display="none";
$("clickMe").style.bottom=0+"px";
}
}

function mouse_over(){
if(timer1){
clearTimeout(timer2);
}
$("clickMe").onmouseover=function(){//鼠標(biāo)經(jīng)過事件
$("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="關(guān)閉" alt=""></div>
? <div class="showPic" id="showPic"><img id="imagePic" src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div>
</div>
</body>
</html>

慕勒6779931

2019-07-25

源自：網(wǎng)頁廣告特效 2-5

關(guān)注問題我要回答

518

操作

收起

1 回答

慕勒6779931 提問者
2019-07-25

這里有個bug還沒解決，暫時沒有找到思路，湊合著吧

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報(bào)

0/150

提交

取消

網(wǎng)頁廣告特效

參與學(xué)習(xí) 40171 人
解答問題 132 個

原來這么EASY，從淺到深，逐步優(yōu)化代碼，讓你深入理解

進(jìn)入課程

交作業(yè)?。。ㄋ夭牟灰粯樱硪粯拥模?/h1> 我要回答 關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

1 回答

交作業(yè)?。。ㄋ夭牟灰粯樱硪粯拥模?/h1> 我要回答 關(guān)注問題

交作業(yè)?。。ㄋ夭牟灰粯樱硪粯拥模?/h1> 我要回答關(guān)注問題