切换风格

后盾网PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

  • 咨询热线: 400-682-3231
  • QQ咨询: 联系在线客服老师 联系在线客服老师 联系在线客服老师

QQ登录

只需一步,快速开始

返回列表 发新帖

[web前端] 碰撞运动,漂浮广告问题

[复制链接]
     
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    5

    主题

    33

    帖子

    779

    积分

    中学生

    Rank: 4

    积分
    779
    活动推广币
    0 个
    后盾币
    779 个
    注册时间
    2017-12-20
    在线时间
    12 小时
    帖子
    33
    发表于 2018-1-3 23:35:42 |显示全部楼层 | 阅读模式
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>漂浮广告</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            #ad{
                width:300px;
                height:200px;
                background-image: url(ad.jpg);
                position: absolute;
                top:0;
                left:0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                //抓取元素
                var ad=document.getElementById('ad');
                //获得浏览器可视化最高宽度和高度
                var win_height=document.documentElement.clientHeight;
                var win_width=document.documentElement.clientWidth;
                //div最大可达到的top和left值
                var max_top=win_height-ad.offsetHeight;
                var max_left=win_height-ad.offsetWidth;
                var x=1,y=1;//初始化left和top每次改变的变量
                setInterval(function(){
                    //获得当前left和top
                    var oldleft=ad.offsetLeft;//获取的left和top,num类型
                    var oldtop=ad.offsetTop;
                    //计算新的left和top
                    var newleft=oldleft+x;
                    var newtop=oldtop+y;
                    //赋值回去
                    ad.style.left=newleft+'px';//赋值回去需要加上单位
                    ad.style.top=newtop+'px';
                    //达到极限区域判断
                    if(newleft==max_left){
                        //达到最大的left值,left需要减小
                        x=-1;//赋值y为负值,越来top越小
                    }
                    if(newleft==0){
                        //left到最左端,left需要增加
                        x=1;
                    }
                    if(newtop==max_top){
                        //达到顶部,top需要减小
                        y=-1;
                    }
                    if(newtop==0){
                        //达到底部,top需要增加
                        y=1;
                    }
                },10)
            }
        </script>
    </head>
    <body>
        <div id="ad">
            <img src="close.jpg" id="close">
        </div>
    </body>
    </html>
         
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    5

    主题

    33

    帖子

    779

    积分

    中学生

    Rank: 4

    积分
    779
    活动推广币
    0 个
    后盾币
    779 个
    注册时间
    2017-12-20
    在线时间
    12 小时
    帖子
    33
    发表于 2018-1-3 23:37:09 |显示全部楼层
    浮动不能达到最右端就跳起了,屏幕缩放会继续下面缩放向下移动,老师帮忙看看哪里的问题
         
  • TA的每日心情
    开心
    7 小时前
  • 签到天数: 30 天

    [LV.5]常住居民I

    15

    主题

    150

    帖子

    3672

    积分

    高中生

    江东风流美丈夫

    Rank: 5Rank: 5

    积分
    3672
    活动推广币
    0 个
    后盾币
    3672 个
    注册时间
    2017-12-23
    在线时间
    64 小时
    帖子
    150
    发表于 2018-1-4 08:31:15 |显示全部楼层
    我感觉你这个写的和完整的效果相差还很大,代码多少就能看的出来
         
  • TA的每日心情
    慵懒
    2018-1-4 13:36
  • 签到天数: 60 天

    [LV.6]常住居民II

    0

    主题

    118

    帖子

    1万

    积分

    硕士

    Rank: 7Rank: 7Rank: 7

    积分
    12406
    活动推广币
    0 个
    后盾币
    12406 个
    注册时间
    2017-3-31
    在线时间
    59 小时
    帖子
    118
    发表于 2018-1-4 13:46:59 |显示全部楼层
    //div最大可达到的top和left值
                var max_top=win_height-ad.offsetHeight;
                var max_left=win_height-ad.offsetWidth;

    max_left 算错了把
         
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    5

    主题

    33

    帖子

    779

    积分

    中学生

    Rank: 4

    积分
    779
    活动推广币
    0 个
    后盾币
    779 个
    注册时间
    2017-12-20
    在线时间
    12 小时
    帖子
    33
    发表于 2018-1-4 16:44:03 |显示全部楼层
    壊、壊、壊人 发表于 2018-1-4 13:46
    //div最大可达到的top和left值
                var max_top=win_height-ad.offsetHeight;
                var m ...

    看出来了,感谢

    发表回复

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    快速回复 返回顶部 返回列表