原生js写悬浮广告效果

网上抄的，改成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>
原生js写悬浮广告效果

推荐阅读
