切换风格

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

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

QQ登录

只需一步,快速开始

返回列表 发新帖

[web前端] 浮动广告效果,总是出现滚动条,为什么??

[复制链接]
     
  • TA的每日心情
    奋斗
    昨天 19:00
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    1

    主题

    21

    帖子

    566

    积分

    小学生

    Rank: 3Rank: 3

    积分
    566
    活动推广币
    0 个
    后盾币
    566 个
    注册时间
    2017-10-18
    在线时间
    13 小时
    帖子
    21
    发表于 2017-12-4 20:20:54 |显示全部楼层 | 阅读模式
    代码如下,如果ad.jpg设置为in=ad的div的背景,则div浮动时不会出现滚动条,若是ad.jpg作为图片插入到div中(图片宽高和div宽高一致),div在浮动时会出现滚动条。
    请各位大神解疑
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            #ad{
                width: 300px;height: 200px;position: absolute;/*background: url(images/ad.jpg) no-repeat*/;
            }
            #close{
                display: block;position: absolute;left:249px;top:0;
            }
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    var ad=document.getElementById('ad');
                    var close=document.getElementById('close');
                    var pic=document.getElementById('pic');
                    //获得可视区域宽高
                    var win_width=document.documentElement.clientWidth;
                    var win_height=document.documentElement.clientHeight;
                    //计算边界值
                    var max_left=win_width-ad.offsetWidth;
                    var max_top=win_height-ad.offsetHeight;
                    var x=5,y=5;
                    function run(){
                        var old_left=ad.offsetLeft;
                        var old_top=ad.offsetTop;
                        //计算新值
                        var new_left=old_left+x;
                        var new_top=old_top+y;
                        //边界处理,防止出现滚动条
                        if(new_left>max_left){
                            new_left=max_left;
                        }
                        if(new_left<0){
                            new_left=0;
                        }
                        if(new_top>max_top){
                            new_top=max_top;
                        }
                        if(new_top<0){
                            new_top=0;
                        }
                        //将新值赋值回去
                        ad.style.left=new_left+'px';
                        ad.style.top=new_top+'px';
                        //判断边界,做往返运动
                        if(new_left==max_left||new_left==0){
                            x=x*-1;
                        }
                        if(new_top==max_top||new_top==0){
                            y=y*-1;
                        }
                    }
                    //设置定时器
                    var timer=setInterval(run,10)
                    //鼠标移入事件
                    ad.onmouseover=function(){
                        //清理定时器
                        clearInterval(timer);
                    }
                    //鼠标移出事件
                    ad.onmouseout=function(){
                        //设置定时器
                        timer=setInterval(run,10);
                    }
                    pic.onclick=function(){
                        location.assign('')
                    }
                    close.onclick=function(){
                        clearInterval(timer);
                        ad.style.display='none';
                    }
                    window.onresize=function(){
                        ad.style.left=0;
                        ad.style.top=0;
                        x=5;
                        y=5;
                        var win_width=document.documentElement.clientWidth;
                        var win_height=document.documentElement.clientHeight;
                        max_left=win_width-ad.offsetWidth;
                        max_top=win_height-ad.offsetHeight;
                    }
                }
            </script>
        </head>
        <body>
            <div id="ad" style="left: 0;top:0;">
                <img src="images/ad.jpg" id='pic' />
                <img src="images/close.jpg" id='close' />
            </div>
        </body>
    </html>

    浮动广告.rar

    1.1 KB, 下载次数: 6

         
  • TA的每日心情
    擦汗
    3 小时前
  • 签到天数: 2324 天

    [LV.Master]伴坛终老

    5064

    主题

    2万

    帖子

    287万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2874788
    活动推广币
    12685 个
    后盾币
    2874788 个
    注册时间
    2011-5-5
    在线时间
    8564 小时
    帖子
    23355

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2017-12-5 09:45:35 |显示全部楼层
    你用的图片也上传一下。
         
  • TA的每日心情
    奋斗
    昨天 19:00
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    1

    主题

    21

    帖子

    566

    积分

    小学生

    Rank: 3Rank: 3

    积分
    566
    活动推广币
    0 个
    后盾币
    566 个
    注册时间
    2017-10-18
    在线时间
    13 小时
    帖子
    21
    发表于 2017-12-6 09:29:37 |显示全部楼层
    本帖最后由 1138151417 于 2017-12-6 09:31 编辑
    深水鱼 发表于 2017-12-5 09:45
    你用的图片也上传一下。

    已经上传,麻烦孙老师看一下

    ad.rar

    14.41 KB, 下载次数: 0

    close.rar

    677 Bytes, 下载次数: 0

    发表回复

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

    本版积分规则

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