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

<!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.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>

js广告浮动的更多相关文章

  1. Jquery广告浮动效果小案例

    导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...

  2. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  4. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  5. 一段简单的顶部JS广告

    一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...

  6. js广告弹窗

    生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...

  7. 电力项目十一--js添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

  8. JS--中奖广告浮动效果

    618要到了.要帮公司做一个简单的中奖号码的浮动.怎么玩了.其实只需要使用scrollHeight;scrollTop;offsetHeight这三个就可以实现了. 代码如下: <html> ...

  9. JS拖动浮动DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

随机推荐

  1. 【C++】命令行Hangman #2015年12月15日 00:20:27

    增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...

  2. .NET平台上的Memcached客户端介绍(Memcached Providers)

    早上接到一个任务,需要对Linux服务器的Memcached的update操作进行性能测试,我发现我是一个典型的“手里拿着锤子,就把所有问题都当成钉子”的人.我第一个念头就是,上Memcached的官 ...

  3. geoserver扫盲 openlayers相关

    转自:http://www.cnblogs.com/lzlynn/archive/2008/07/29/1255702.html WMS: Web Map Service(Web地图服务 ) l  利 ...

  4. NSArray和NSMutableArray的copy和MutableCopy

    NSArray: //main.m #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { ...

  5. imdisk命令行使用及配置

    imdisk是一个开源的虚拟磁盘软件,集虚拟光驱,文件虚拟光驱,映射物理磁盘,映射物理内存等功能 如果使用devio--Device I/O Service,可以映射网络磁盘等. 通用于windows ...

  6. Failed to load unit 'PATM' (VERR_SSM_FIELD_NOT_CONSECUTIVE)

    今天打开虚拟机启动的时候报错:Failed to load unit 'PATM' (VERR_SSM_FIELD_NOT_CONSECUTIVE) 后来发现虚机处于休眠状态,所以在虚机上右键,然后清 ...

  7. swift Swauth install

    devAuth 是swift原生的认证中间层, Swauth是为了解决devAuth不能扩展的问题而开发的替代方案. Quick Install #git clone https://github.c ...

  8. Ubuntu13.04配置完全指南(转）

    Ubuntu13.04配置完全指南(一)软件源 教育网推荐使用USTC软件源. 首先备份现有软件源: $ sudo cp /etc/apt/sources.list /etc/apt/sources. ...

  9. cocos2d-x 从onEnter、onExit、 引用计数 谈内存泄露问题

    /////////////////////////////////// //author : zhxfl //date   : 2013.8.29 //email  : 291221622@qq.co ...

  10. Exception in thread "main" java.lang.ClassNotFoundException: 解决方法

    [root@h1 ~]# hadoop jar W1.jar hdfs://h1:9000/hello hdfs://h1:9000/cmd Exception in thread "mai ...