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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript实现的多个图片广告交替显示效果代码

    JavaScript实现的多个图片广告交替显示效果代码

    本文实例讲述了JavaScript实现的多个图片广告交替显示效果代码.分享给大家供大家参考.具体如下: 这里演示JavaScript让多个Banner图片广告交替显示的效果,如果你的站很牛,广告位被占满了,你可以考虑让多个图片广告轮番交替显示,链接也跟着变,这样是不是为你节省了宝贵的广告位?思路是好,但不知道广告效果是不是也一样好,这就需要实验了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-npic-cha-adv-style-cod

  • JavaScript定时显示广告代码分享

    这是一则定时显示广告的javascript代码,当然也可以定时显示某一区块内容,很实用. 代码如下: 复制代码 代码如下: function strToDate(str, ext) {  if (str == null || str == '') return;  var arys = new Array();  arys = str.split('-');  var newDate = new Date(arys[0], arys[1] - 1, arys[2], 9, 0, 0);  if

  • javascript 随机广告代码(图片广告)

    '); document.writeln(''); document.writeln(''); //DEL 20090522 document.write(''); //****************************************************/ //rnd() //****************************************************/ function rnd() { var ia=9301; var ic=49297; var

  • javascript强制点击广告的方法

    本文实例讲述了javascript强制点击广告的方法.分享给大家供大家参考.具体如下: 这里介绍的强制点击广告的JavaScript代码,先点击广告后下载地址才生效,或者是先点击广告后才会显示某部分内容,一般用于下载站或文档资料类网站,尽量不要多用哦,否则网站的用户体验会很差! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

  • JavaScript常用的弹出广告及背投广告实现方法

    本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码 代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </

  • Javascript实现带关闭按钮的网页漂浮广告代码

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absol

  • 如何制作浮动广告 JavaScript制作浮动广告代码

    如果有一定的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"

  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

  • 用javascript实现的仿Flash广告图片轮换效果

    <!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-

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

    本文实例讲述了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"&g

  • JavaScript实现滚动栏效果的方法

    本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; le

  • JavaScript实现彩虹文字效果的方法

    本文实例讲述了JavaScript实现彩虹文字效果的方法.分享给大家供大家参考.具体如下: <HTML> <HEAD> <TITLE>Rainbow Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin hide from old browsers function createHexArray(n) { this.length = n; for (var i =

  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

  • javascript实现链接单选效果的方法

    本文实例讲述了javascript实现链接单选效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接单选</title> <

  • Javascript实现关闭广告效果

    用Javascript实现关闭广告案例,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教. 我们在网页中经常可以看见烦人的小广告,并且广告的旁边通常会有一个特定的位置和图标来关闭这个广告图.下面用JS代码来简单的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tit

  • 最精简的JavaScript实现鼠标拖动效果的方法

    相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • js实现简单的左右两边固定广告效果实例

    本文实例讲述了js实现简单的左右两边固定广告效果的方法.分享给大家供大家参考.具体分析如下: 大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说. 要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到. 要点二: 复制代码 代码如下: adleft.style.top=adtop+(document.documentElement.scroll

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

  • javascript搜索框效果实现方法

    本文实例讲述了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">

随机推荐