zoukankan      html  css  js  c++  java
  • 悬浮广告(一)html版本

    网上抄的,改成vue写法失败,下一篇是自己写的vue版本的

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>html漂浮广告</title>
    </head>
    <body>
      <p style="font-size: 32px;">html漂浮广告</p>
    <DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
    visibility: visible;"><a href="http://sc.jb51.net" target="_blank"><img src="../assets/u=2610250996,3671218916&fm=26&gp=0.jpg" width="80" height="80" border="0"></a></DIV>
    <SCRIPT>
      var xPos = 300;
      var yPos = 200;
      var step = 1;
      var delay = 5;
      var height = 0;
      var Hoffset = 0;
      var Woffset = 0;
      var yon = 0;
      var xon = 0;
      var pause = true;
      var interval;
      img1.style.top = yPos;
    function changePos(){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
        Hoffset = img1.offsetHeight;
        Woffset = img1.offsetWidth;
        img1.style.left = xPos + document.body.scrollLeft;
        img1.style.top = yPos + document.body.scrollTop;
        if (yon){
          yPos = yPos + step;
        }else{
          yPos = yPos - step;
        }
        if (yPos < 0){
          yon = 1;yPos = 0;
        }
        if (yPos >= (height - Hoffset)){
          yon = 0;yPos = (height - Hoffset);
        }
        if (xon){
          xPos = xPos + step;
        }else{
          xPos = xPos - step;
        }
        if (xPos < 0){
          xon = 1;xPos = 0;
        }
        if (xPos >= (width - Woffset)){
            xon = 0;xPos = (width - Woffset); 
          }
        }
    
    function start(){
        img1.visibility = "visible";
        interval = setInterval('changePos()', delay);
      }
    function pause_resume(){
      if(pause){
        clearInterval(interval);
        pause = false;
      }else{
        interval = setInterval('changePos()',delay);
        pause = true;
      }
    }
    start();
    </SCRIPT>
    </body>
    </html>
  • 相关阅读:
    Loadrunner自带协议分析工具:Protocol Advisor
    selenium+python学习总结
    第三篇 HTML 表单及表格
    第二篇 HTML 常用元素及属性值
    第一篇 HTML 认识HTML
    int 问号的使用
    uploadify 上传文件插件
    poj3728 The merchant
    最大公约数
    Bzoj1529/POI2005 ska Piggy banks
  • 原文地址:https://www.cnblogs.com/wd163/p/13424758.html
Copyright © 2011-2022 走看看