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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
详解Vue数据驱动原理
Nov 17 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
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
详解php中的implements 使用
2017/06/13 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JS 控制CSS样式表
2009/08/20 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python基于当前时间批量创建文件
2020/05/07 Python
详解python对象之间的交互
2020/09/29 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
机关办公室岗位职责
2014/04/16 职场文书
汽修专业自荐信
2014/07/07 职场文书
自查自纠整改报告
2014/11/06 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
妈妈别哭观后感
2015/06/08 职场文书
教师节随笔
2015/08/15 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
一起来学习Python的元组和列表
2022/03/13 Python