js广告浮动

最新推荐文章于 2023-10-13 11:29:01 发布

dianmei3204

最新推荐文章于 2023-10-13 11:29:01 发布

阅读量200

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lzzhuany/p/4565734.html

版权

一个广告框在指定区域，有定位属性的父级区域内，一直向右向左移动，如果碰到左右边框，反向，如果碰到上下边距，反向，实现在指定框中浮动的效果。

<!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.οnlοad=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>

转载于:https://www.cnblogs.com/lzzhuany/p/4565734.html

dianmei3204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js广告浮动

一个广告框在指定区域，有定位属性的父级区域内，一直向右向左移动，如果碰到左右边框，反向，如果碰到上下边距，反向，实现在指定框中浮动的效果。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>广告浮动</t...
复制链接

扫一扫