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 相关文章推荐
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
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
新闻分类录入、显示系统
2006/10/09 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP crc32()函数讲解
2019/02/14 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
python解包用法详解
2021/02/17 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
公司户外活动总结
2014/07/04 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL