首页 > 代码库 > 制作浮动广告，实现浮动高中在屏幕中来回走动
制作浮动广告，实现浮动高中在屏幕中来回走动
<script language="javascript" type="text/javascript">
var x=1;//1表示向右移动，0表示向左移动
var y=1;//1表示向下移动，0表示向上移动
function showDiv(){
var adv = document.getElementById("floatDiv");
if(x==1){
adv.style.pixelLeft = adv.style.pixelLeft+3;
}else{
adv.style.pixelLeft = adv.style.pixelLeft-3;
}
//如果广告移动到了最右端
if(document.documentElement.clientWidth-adv.style.pixelLeft<adv.style.pixelWidth){
x=0;
}
//如果广告移动到了最左端
else if(adv.style.pixelLeft<0){
x=1;
}
if(y == 1){
adv.style.pixelTop =adv.style.pixelTop+3;
}else{
adv.style.pixelTop =adv.style.pixelTop-3;
}
if(document.documentElement.clientHeight!=0){
//如果广告移动到最底端
if(document.documentElement.clientHeight-adv.style.pixelTop<adv.style.pixelHeight){
y=0;
}
//如果广告移动到最顶端
else if(adv.style.pixelTop<0){
y=1;
}
}
}
var t = window.setInterval("showDiv()",20);
//广告停止移动
function stopAdv(){
window.clearInterval(t);
}
//广告继续移动
function startAdv(){
t = window.setInterval("showDiv()",20);
}
//隐藏广告
function closeDiv(){
document.getElementById("floatDiv").style.display="none";
}
</script>
<body>
<!--当position:absolute广告只会在绝对的位置上移动，当滚动条滚动到下面去的时候广告就看不到了，如果position:fixed广告会在相对的位置上移动，不管滚动条滚动到哪个地方都可以看到广告移动-->
<div id="floatDiv" style="width:80px;height:72px; position:fixed; top:100px" onm ouseover="stopAdv()" onm ouseout="startAdv()">
<img src="http://www.mamicode.com/image/float.gif"/><br />
<input type="button" value="http://www.mamicode.com/关闭" onclick="closeDiv()"/>
</div>
</body>