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

<!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. Android 开发性能优化之SparseArray(二)

    一.SparseIntArray API SparseIntArrays map integers to integers.  Unlike a normal array of integers, t ...

  2. ArcGIS for Android示例解析之高亮要素-----HighlightFeatures

    转自:http://blog.csdn.net/wozaifeiyang0/article/details/7323606 HighlightFeatures 要素高亮化功能,相信有其他gis开发经营 ...

  3. BZOJ2818: Gcd 欧拉函数求前缀和

    给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 如果两个数的x,y最大公约数是z,那么x/z,y/z一定是互质的 然后找到所有的素数,然后用欧拉函数求一 ...

  4. HDU-1240 Asteroids! （BFS）这里是一个三维空间，用一个6*3二维数组储存6个不同方向

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  5. Unity3d Realtime Dynamic Volume Clouds Rendering

    Ray Marching体积渲染+perlin noise 动态效果: 博主近期渲染: 2016的渲染 2015后半段的渲染 ---- by wolf96

  6. Java笔记(十五)……面向对象IV多态(polymorphism)

    概述 定义:某一类事物的多种存在形态. 例:动物中猫,狗. 猫这个对象对应的类型是猫类型 猫 x = new 猫(); 同时猫也是动物中的一种,也可以把猫称为动物. 动物 y = new 猫(); 动 ...

  7. linux Grant 添加 MySql 用户

    Grant 添加 MySql 用户 2009-04-03 14:40 我安装的版本: mysql> select version();+------------+| version()   |+ ...

  8. hadoop中Combiner使用中需要注意的地方

    今天在写一个MR的时候,用到了combiner.在使用过程中,遇到了一些问题,特此记录一下. Combiner分为两种,一种是可插拔的,一种是不可插拔的. 可插拔的:Combiner和Reduce的处 ...

  9. POJ1159 - Palindrome(区间DP)

    题目大意 给定一个字符串S,问最少插入多少个字符可以使字符串S变为回文串 题解 用dp[i][j]表示把字符串s[i-j]变为回文串需要插入的最小字符数 如果s[i]==s[j]那么dp[i][j]= ...

  10. PAT 1026

    1026. Table Tennis (30) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A table ...