• js广告浮动


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

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>广告浮动</title>
    <style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }    
    #div1{
        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>
    
  • 相关阅读:
    Cookie实现记住密码功能
    Mybatis实现修改功能
    微信企业号开发
    java使用CXF动态调用webservice接口
    Oracle数据库监听失败
    java实现导入excel功能
    全球根服务器分别部署在哪里?
    微软披露大规模网络钓鱼活动详细信息
    常用名称
    Centos设置网络(固定IP)
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4565734.html
Copyright © 2020-2023  润新知