切换风格

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

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 145|回复: 4

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

[复制链接]
     
  • TA的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1247
    活动推广币
    0 个
    后盾币
    1247 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    48
    发表于 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的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

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

    [LV.5]常住居民I

    17

    主题

    188

    帖子

    3980

    积分

    高中生

    江东风流美丈夫

    Rank: 5Rank: 5

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

    [LV.6]常住居民II

    0

    主题

    123

    帖子

    1万

    积分

    硕士

    Rank: 7Rank: 7Rank: 7

    积分
    12615
    活动推广币
    0 个
    后盾币
    12615 个
    注册时间
    2017-3-31
    在线时间
    64 小时
    帖子
    123
    发表于 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的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

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

    看出来了,感谢
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    Archiver|小黑屋|后盾人 人人做后盾 ( 京ICP备12048441号-3 )

    GMT+8, 2018-7-23 02:20 , Processed in 0.120610 second(s), 29 queries .

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

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