광고 변동

1805 단어 js
광고 상 자 는 지정 한 영역 에 위치 추적 속성 이 있 는 부모 급 영역 에서 오른쪽으로 계속 왼쪽으로 이동 합 니 다. 좌우 테두리 에 닿 으 면 반대 방향 으로, 상하 테두리 에 닿 으 면 반대 방향 으로 지정 한 상자 에서 움 직 이 는 효 과 를 실현 합 니 다.
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>    </title>

<style type="text/css">

*{

    padding: 0px;

    margin: 0px;

}    

#div1{

    width:50px;

    height:70px;

    border: 1px solid red;

    background: blue;

    position: absolute;/*    */

}

</style>

    <script type="text/javascript">

window.onload=function(){

    var oDiv=document.getElementById('div1');//  div  

    

    var x=1,y=1;

    setInterval(function(){//   

        var hei=oDiv.offsetHeight;//  div   (   )

        var k_hei=document.documentElement.clientHeight;//         

        var max_top=k_hei-hei;//           



        var wid=oDiv.offsetWidth;//  div   (   )

        var k_wid=document.documentElement.clientWidth;//         

        var max_left=k_wid-wid;//           



        var left=oDiv.offsetLeft;//           

        var top=oDiv.offsetTop;//        

        var new_left=left+1*x;//      ,       

        var new_top=top+1*y;//      ,       

        if(new_top>=max_top||new_top==0){//               ,           0 (    ),       

                y=-1*y;

        }

        if(new_left>=max_left||new_left==0){//               ,           0 (    ),       

                x=-1*x;

        }

        oDiv.style.left=new_left+'px';//  (      )

        oDiv.style.top=new_top+'px';//  (      )

    },10);



}



    </script>



</head>

<body>

   <div id="div1"></div> 

</body>

</html>


좋은 웹페이지 즐겨찾기