java培训之WEB前端——漂浮广告的制作
用到的技术：HTML+CSS+JavaScript;主要以JavaScript为主。
要求：图片在整个页面漂浮。
操作步骤：
首先制作一个html页面，插入一张图片；代码如下
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title漂浮广告/title/head
body
divid="box1"
ahref="JavaScript:;"imgsrc="ad.gif"height=""width=""/a
/div
/body
/html
用CSS图片位置等进行定位
styletype="text/css"
*{margin:0;padding:0;}
a,img{border:none;}
#box1{height:px;width:px;position:absolute;top:0px;left:0px;}
/style
利用JavaScript实现漂浮效果；代码如下
scripttype="text/JavaScript"
window.onload=function(){
varobox=document.getElementById("box1");
//向左走
vartimer=null,
dirX=dirY=1,
speed=5;
functionfn(){
//对于水平方向
if((obox.offsetLeft+obox.offsetWidth)document.documentElement.clientWidth){
dirX=-1;
}
if(obox.offsetLeft0){
dirX=1;
}
obox.style.left=obox.offsetLeft+dirX*speed+"px";
//对于竖直方向
if((obox.offsetTop+obox.offsetHeight)document.documentElement.clientHeight){
dirY=-1;
}
if(obox.offsetTop0){
dirY=1;
}
obox.style.top=obox.offsetTop+dirY*speed+"px";
};
timer=setInterval(fn,);//开始移动
//鼠标移上去停止
obox.onmouseover=function(){
if(timer!=null)
clearInterval(timer);
};
//鼠标移开继续移动
obox.onmouseout=function(){
timer=setInterval(fn,);
};
}
/script
版权：康诺科技
/6/28
赞赏