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

<!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. -_-#【JS 优化】把 JS 放到底部

    一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现, 并不完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引 ...

  2. 关于app transfer之后的开发

    原文  http://blog.csdn.net/donghong2008/article/details/38020855 网络上有很多开发者提问怎么转让App并想知道具体的流程.实际上Appsto ...

  3. 【转】Xcode重构功能怎么用我全告诉你

    原文网址:http://www.cocoachina.com/ios/20160127/15097.html 你会经常需要重构你的代码,让它有更好的结构,可读性或者提高可维护性.Xcode作为IDE其 ...

  4. Chrome的隐身模式

    先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗口”. 3.你还可以在一 ...

  5. JSP---JavaBean的使用-jsp:useBean标签相关

    JavaBean介绍: JavaBean其实就是一个遵循特定写法的java类,但是必须具有如下特点: 1.这个java类必须具有一个公开的无参构造函数 2.属性必须私有化,类必须公开 3.私有化的属性 ...

  6. wuzhicms字段的添加以及实现下载功能

    1.字段的添加 发布内容--> 栏目管理--> 字段管理-->添加字段 下面根据需求进行相应的设置. 然后提交即可. 2.下载功能的实现 实例说明: 会员中心相关页面下载功能的实现 ...

  7. Cogs 97. [NOIP2007] 树网的核 Floyd

    题目: http://cojs.tk/cogs/problem/problem.php?pid=97 97. [NOIP2007] 树网的核 ★☆   输入文件:core.in   输出文件:core ...

  8. Docker系列(四)Dockerfile

    基本语法 使用 #来注释 FROM 指令告诉Docker使用哪个镜像作为基础 接着是维护者信息 RUN 开头的指令会在创建中运行,比如安装软件包 FROM 格式: FROM<image>或 ...

  9. HW5.22

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. 委托demo

    delegate bool Filter(string s); class test { static void Main() { Filter f=new Filter(A); Display(ne ...