jsday11补充二(弹来弹去的广告关键是Interval计时和来回判断)

最新推荐文章于 2021-01-11 18:05:20 发布

转载最新推荐文章于 2021-01-11 18:05:20 发布 · 354 阅读

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种自定义网页布局的方法，并通过JavaScript实现了页面元素的自动移动效果。通过设置绝对定位及定时器，使得广告框能在限定区域内自动移动，增强了用户体验。同时探讨了如何在网页中设置自定义大小的body元素。

未知要自定义body大小(需要直接在body定义 css无效定义)

<style type="text/css">
#bodyid{
    border:#000 1px solid;
    position:absolute;
    width:800px;
    height:600px;
}

</style>
<script type="text/javascript">
var x=1, y=1 ,movex = 0,movey= 0;
function movead()
{
    var divObj = document.getElementById("ad");
    movex= movex+x*5 ;
    movey = movey+y*5 ;


    divObj.style.left = movex+"px";
    divObj.style.top = movey+"px";
    if(movex+divObj.offsetLeft>=document.body.offsetWidth)
     {
        //alert("2");
        x=-1;
     }
     else if(movex<=0){
        x=1;
     }

    if(movey+divObj.offsetHeight>=document.body.clientHeight)
     {   
        y=-1;
     }
     else if(movey<=0)
     {
        y=1;     
     }

}
var timeid;
function over()
{
    clearInterval(timeid);  
}
function out()
{
    fly();  
}
function fly()
{
    timeid = setInterval("movead()",10);//来回飞 10秒一次飞循环  
}
window.onload=function()
{
    fly();  
}
function closead()
{
    var divObj=document.getElementById("ad");

    divObj.style.display="none";
    over(); 
}
function place()
{
    var divObj = document.getElementById("ad");
    //  alert(divObj.offsetLeft+"..."+divObj.clientLeft+"body");
    alert(document.body.clientHeight+"..."+document.body.offsetWidth);//不知道为什么document的body只能获取23 大小 需要自定义body大小 
}

</script>
</head>

<body style="height:600px">

<div id="ad" style="position:absolute;left:0px;top:0px" onmouseover="over()" onmouseout="out()" >
<a href="http://127.0.0.1" target="_blank"><img src="1png.png" height="160px" width="200px" /></a>
 <br />
 <a href="javascript:void(0)" onclick="closead()">关闭</a>
</div>
<input type="button" onclick="place()" value="位置"/>
<div id="bodyid">
    body区域
</div>
<img src="4.png" height="600" width="700" border="2" />
<!--加入后不用在body定义width -->
</body>