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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP操作文件方法问答
2007/03/16 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python 错误和异常代码详解
2018/01/29 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python 常用的基础函数
2018/07/10 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python根据url地址下载小文件的实例
2018/12/18 Python
简单了解python关系(比较)运算符
2019/07/08 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
新年联欢会主持词
2014/03/27 职场文书
师范生自荐信模板
2014/05/28 职场文书
超市创业计划书
2014/09/15 职场文书
2014年司机工作总结
2014/11/21 职场文书
春晚观后感
2015/06/11 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers