【教程】随或不随窗口滚动条移动而移动的浮动广告
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> <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; } } }