【教程】随或不随窗口滚动条移动而移动的浮动广告

1.随窗口滚动条移动而移动，如图所示：

html代码

<div id="ad1">悬浮广告<span><a href="#" οnclick="closead(1);">关闭</a></span></div>

css代码

#ad1 {
    width: 60px;
    height: 120px;
    border: 1px solid #000000;
    position: absolute;
    left: 100px;
    top: 100px;
    line-height: 120px;
}
#ad1 span {
    float:right;
    line-height: 18px;
}
#ad1 span a {
    color: #000000;
    text-decoration: none;
}

javascript代码

function closead(n) {
    document.getElementById("ad"+n).style.display="none";
}

2.不随窗口滚动条移动而移动（固定位置）

html代码

<div id="ad2">悬浮广告<span><a href="#" οnclick="closead(2);">关闭</a></span></div>

css代码

#ad2 {
    float: right;
    width: 60px;
    height: 120px;
    border: 1px solid #000000;
    position: fixed;
    right: 100px;
    top: 100px;
    line-height: 120px;
}
#ad2 span {
    float:right;
    line-height: 18px;
}
#ad2 span a {
    color: #000000;
    text-decoration: none;
}

javascript同上

3.右下角提醒广告，如图所示：

html代码

<div id="ad3">提醒广告<span><a href="#" οnclick="goad3();" id="ad3a">最小化</a>&nbsp;<a href="#" οnclick="goad3(3);">关闭</a></span></div>

css代码

#ad3 {
    float: right;
    width: 360px;
    height: 220px;
    border: 1px solid #000000;
    position: fixed;
    right: 0px;
    bottom: 0px;
    line-height: 120px;
}
#ad3 span {
    float:right;
    line-height: 18px;
}
#ad3 span a {
    color: #000000;
    text-decoration: none;
}

javascript代码

var m=220;
var si;
var b=true;
function goad3(){
    si=setInterval("changead3()",10);
}
function changead3() {   
    if(b){     
        m--;
        document.getElementById("ad3").style.height=m+"px";
        if(m==34){
            document.getElementById("ad3a").innerHTML="最大化";
            clearInterval(si);
            b=false;                
        }     
    }  
    else{
        m++;
        document.getElementById("ad3").style.height=m+"px";
        if(m==220){
            document.getElementById("ad3a").innerHTML="最小化";
            clearInterval(si);
            b=true;
        }   
    }  
}