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

<!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. 【转】国内用户如何加快App Store的访问速度

    原文网址:http://www.app111.com/doc/100024206_1.html 作为国内互联网用户是比较可怜的,除了国外四大顶尖互联网服务不能访问外,就是App Store用得也比较痛 ...

  2. c# process 输入输出

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. Discuz!NT中集成Memcached分布式缓存

    大约在两年前我写过一篇关于Discuz!NT缓存架构的文章,在那篇文章的结尾介绍了在IIS中如果开启多个应用程序池会造成多个缓存实例之间数据同步的问题.虽然给出了一个解决方案,但无形中却把压力转移到了 ...

  4. LightOJ 1341 Aladdin and the Flying Carpet 数学

    题意:给个矩形的面积a,和矩形的最小边长b,问有多少种矩形的方案(不能是正方形) 分析:a可以写成x,y,因为不能是正方形,所以设x<y,那么x<sqrt(a),y>sqrt(a) ...

  5. HDU2520 我是菜鸟，我怕谁

    http://acm.hdu.edu.cn/showproblem.php?pid=2520 我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others) Memor ...

  6. 自动化测试实施的几个idea

    UI检查.测试的一个idea 在电子商务网站中, 为达到较好的用户体验, 可能页面上会有大量的UI设计,一堆css.ajax效果等,敏捷开发中, UI变动更是带来了测试的苦恼.对于回归组catch U ...

  7. oracle 创建索引思考（转）

    在Oracle数据库中,创建索引虽然比较简单.但是要合理的创建索引则比较困难了. 笔者认为,在创建索引时要做到三个适当,即在适当的表上.适当的列上创建适当数量的索引.虽然这可以通过一句话来概括优化的索 ...

  8. virtualenv下配置nginx uwsgi Django

    1.安装virtualenv,创建虚拟环境django15 sudo apt-get install virtualenv virtualenv env source bin/active pip i ...

  9. DevExpress的GridControl控件更新數據問題解決辦法

    開發WPF程序時,使用Devexpress的GridControl控件用ItemSource綁定數據,在頁面進行編輯時,當屬性繼承INotifyPropertyChanged接口時會同步更新後臺數據. ...

  10. PC-大概最全的黑客工具表了

    纯真IP数据库查询程序 ­ remote administrator ­ (rar解密)ZiperelloV2.0 汉化版.zip ­ (代理跳板)SkSockServer1.09.zip ­ [ar ...