飘浮广告
要求:
页面两侧有广告,广告上下来回滚动,点击关闭,广告被关闭。
HTML代码片:
<div id="adv_left" class="adv adv_left">
<span id="left_close">×</span>
</div>
<div id="adv_right" class="adv adv_right">
<span id="right_close">×</span>
</div>
CSS代码片:
<style type="text/css">
body{
height: 2000px;
}
.adv{
background: url(../img/tx.jpg);
width: 200px;
height: 150px;
}
.adv_left{
position: absolute;
left: 10px;
top: 10px;
}
.adv_right{
position: absolute;
right: 10px;
top: 10px;
}
.adv>span{
position: absolute;
right: 0;
top: -12px;
font-size: 36px;
color: red;
}
</style>
JS代码片:
<script type="text/javascript">
var adv_left=document.getElementById("adv_left");
var adv_right=document.getElementById("adv_right");
var left_close=document.getElementById("left_close");
var right_close=document.getElementById("right_close");
left_close.onclick=function(){
adv_left.style.display="none";
}
right_close.onclick=function(){
adv_right.style.display="none";
}
var t=0 ,l=0;
//获取屏幕的高度
var h=screen.height;
var w=screen.width;
var h1=screen.availHeight;//除了任务栏屏幕的高度
var w1=screen.availWidth;//除了任务栏屏幕的宽度
//左右漂浮的广告
/*function advRight(){
adv_left.style.left=l+"px";
adv_right.style.right=l+"px";
l+=5;
var timerRight=setTimeout("advRight()",100);
if(l>screen.availWidth-200){
clearTimeout(timerRight);
advLeft();
}
}
advRight();
function advLeft(){
adv_left.style.left=l+"px";
adv_right.style.right=l+"px";
l-=5;
var timerLeft=setTimeout("advLeft()",100)
if(l<0){
clearTimeout(timerLeft);
advRight();
}
}*/
// 上下漂浮的广告
function adv_down(){
adv_left.style.top=t+"px";
adv_right.style.top=t+"px";
t++;
var timerDown=setTimeout("adv_down()",100);
if(t>screen.availHeight-180){
clearInterval(timerDown);
adv_up();
}
}
adv_down();
function adv_up(){
adv_left.style.top=t+"px";
adv_right.style.top=t+"px";
t--;
var timerUp=setTimeout("adv_up()",100)
if(t<0){
clearTimeout(timerUp);
adv_down();
}
}
</script>
效果如下:

版权声明:本文为suiferq原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。