网上抄的，改成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写悬浮广告效果的更多相关文章

  1. 用原生js写碰撞变色效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  5. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  8. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  9. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. 用了两周开源堡垒机OneTerm，我有一些建议

    上一篇文章分享了一款简洁且强大的开源堡垒机OneTerm,功能完善,代码简单,GO语言开发,用来学习很合适,拿来自用也没问题.堡垒机该有的核心功能基本都有了,方便与自有系统集成,我使用了两周,功能上没 ...

  2. KingbaseES V8R6 等待事件之DataFileRead

    等待事件含义 IO:DataFileRead等待事件发生在会话连接等待后端进程从存储中读取所需页面,原因是该页面在共享内存中不可用或无法找到. 所有查询和数据操作(DML)操作都访问缓冲池中的页面,语 ...

  3. #根号分治，背包#51nod 1597 有限背包计数问题 LOJ 6089 小Y的背包计数问题

    题目 有一个大小为\(n\)的背包,有\(n\)种物品, 第\(i\)种物品的大小为\(i\),且有\(i\)个, 求装满这个背包的方案数 \(n\leq 10^5\) 分析 直接多重背包会有问题,考 ...

  4. vue3中的样式为什么加上scoped不生效

    <style>标签添加scoped属性时,Vue会自动为该组件内的所有元素添加一个独特的数据属性,例如data-v-f3f3eg9.同时,它也会修改你的CSS选择器,使得它们只匹配带有这个 ...

  5. MySQL集群入门（PXC）

    目标: 1.掌握PXC集群MySQL方案的原理: 2.掌握PXC集群的强一致性: 3.掌握PXC集群的高可用方案:硬件要求: 1.Win10x64企业版/linux/MacOS: 2.Docker虚拟 ...

  6. Centos调整分区存储大小

    将/home下900G转移到/目录下 1.查看分区大小:df -hl 2.备份home文件:tar cvf /run/home.tar /home 3.终止home文件进程(切换到非home路径下执行 ...

  7. Spring Cloud Sleuth：分布式请求链路跟踪

    Spring Cloud Sleuth:分布式请求链路跟踪 SpringCloud学习教程 SpringCloud Spring Cloud Sleuth 是分布式系统中跟踪服务间调用的工具,它可以直 ...

  8. wireshark 抓包整理———— 从一个小案例开始 [一]

    前言 前面已经有抓包系列了,简单写一下wireshark的抓包系列,共36节,18个理论小栗子,36个实战栗子. 正文 这个例子是<<wireshark 分析就这么简单>>的一 ...

  9. nginx 使用下的一些基本概念

    前言 以前的nginx总结的概念! 正文 来看下百度的概念: Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务. Nginx ...

  10. Locust、Jemter、Loadrunner三种工具的分布式压测

    前言: 最近公司接了一个云上展会项目,合同里签订的是6w并发连接数和2w QPS的性能指标,还有监理单位,第三方评测单位. 唉,先吐槽一下,有了监理和评测,文档tmd一堆堆,严格按照软件开发来执行,写 ...