Javascript实现飞动广告效果的方法


Posted in Javascript onMay 25, 2015

本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>飞动的广告</title>
  <style type="text/css">
    body,div,p
    {
      margin:0;
      padding:0;
      font-size:14px;
    }
    #divMain
    {
      width:200px;
      height:800px;
    }
  </style>
  <script type="text/javascript">
    var tmrID;
    var x = 1;
    var y = 1;
    function moveAD() {
      var divFly = document.getElementById("divFly");
      var moveX = parseInt(divFly.style.left) + x * 5;
      var moveY = parseInt(divFly.style.top) + y * 5;
      //divFly.offsetWidth
      if ((moveX + divFly.offsetWidth) >= document.body.clientWidth) {
        x = -1;
      }
      if ((moveY + divFly.offsetHeight) >= document.body.clientHeight) {
        y = -1;
      }
      if (moveX <= 0) {
        x = 1;
      }
      if (moveY <= 0) {
        y = 1;
      }
      divFly.style.left = moveX;
      divFly.style.top = moveY;
    }
    function ClearTimer() {
      clearInterval(tmrID);
    }
    function fly() {
      tmrID = setInterval(moveAD, 20);
    }
    window.onload = function () {
      var divFly = document.getElementById("divFly");
      divFly.onmouseover = function () {
        ClearTimer();
      }
      divFly.onmouseout = function () {
        fly();
      }
      fly();
    }
    function closeAD() {
      ClearTimer();
      var divFly = document.getElementById("divFly");
      divFly.style.display = "none";
    }
  </script>
</head>
<body>
  <div id="divMain"></div>
  <div id="divFly" style="position:absolute;top:0;left:0;border:1px solid green;">
    <img src="../images/fly.gif" height="60px" width="60px" />
    <p><a href="javascript:void(0)" onclick="closeAD()">关闭</a></p>
  </div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
json的使用小结
Jun 08 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
javascript自定义右键弹出菜单实现方法
May 25 #Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 #Javascript
JavaScript实现仿网易通行证表单验证
May 25 #Javascript
js+cookies实现悬浮购物车的方法
May 25 #Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python实现按任意键继续执行程序
2016/12/30 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python对execl 处理操作代码
2020/06/22 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
年度考核自我评价
2014/01/25 职场文书
社会实践的活动方案
2014/08/22 职场文书
文员岗位职责
2015/02/04 职场文书
2015年母亲节寄语
2015/03/23 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
四风之害观后感
2015/06/09 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
详细介绍python类及类的用法
2021/05/31 Python