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

<!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. Zookeeper的一致性协议：Zab（转）

    Zookeeper使用了一种称为Zab(Zookeeper Atomic Broadcast)的协议作为其一致性复制的核心,据其作者说这是一种新发算法,其特点是充分考虑了Yahoo的具体情况:高吞吐量 ...

  2. POJ 3013

    思路:ans = 每条边(u,v)*v的子树节点的w = 所有的dist[v]*w[v]之和; #include<iostream> #include<queue> #incl ...

  3. HDU 2191

    思路:简单动态规划,多重背包转化成0 1背包问题 #include<stdio.h> #include<string.h> int a[101][2001],rcw[2001] ...

  4. 【CSS】Beginner3:Color

    1.red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 2.Predefined color name aqua, black, blue, fuchsia, ...

  5. leecode 归并排序 链表(java)

    写了好久,终于写成了.第一次zai leecode错题,题目质量很高,适合面试,与 1.归并排序是稳定的,在java中 Arrays.sort(a);中对于对象的排序就是归并排序.对于原子类型数据使用 ...

  6. [转载]DOS循环：bat/批处理for命令详解 (史上虽详尽的总结和说明~~)

    --本文来源于TTT BLOG: http://www.yoyotao.net/ttt/, 原文地址:http://www.yoyotao.net/ttt/post/139.html 前言: 虽然以前 ...

  7. Fixing ssh login long delay

    原文:http://injustfiveminutes.com/2013/03/13/fixing-ssh-login-long-delay/ For a long time I had a prob ...

  8. linux 开机自动挂载ntfs盘

    1) 查看盘符UUID vellbibi@vell001:~$ sudo blkid [sudo] password for vellbibi: /dev/sda1: UUID="bce9e ...

  9. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程04：技能的输入与检测》

    4.技能的输入与检测 概述: 技能系统的用户体验,制约着玩家对整个游戏的体验.游戏角色的技能华丽度,连招的顺利过渡,以及逼真的打击感,都作为一款游戏的卖点吸引着玩家的注意.开发者在开发游戏初期,会根据 ...

  10. chmod chgrp chown

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...