1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title></title>
  5. <style type="text/css">
  6. div{
  7. position:absolute;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="floatdiv">
  13. <img src="1.jpg" height="100px" width="200px">
  14. </div>
  15. </body>
  16. </html>
  17. <script language="javascript" type="text/javascript">
  18. /*
  19. 利用window对象，实现浮动效果
  20.  
  21.  1、有一个div，就是我们要控制的，它的起始点坐标（0,0）
  22.  2、设定横向和纵向的速度
  23.  3、控制div移动
  24.   1）div是否到达边界，设置图片速度反向移动
  25. */
  26. //获取图片所在的div对象
  27.  
  28. var img=document.getElementById("floatdiv");
  29. //设置div起始点坐标
  30. var x=0,y=0;
  31. //设置div行进速度
  32. var xSpeed=2,ySpeed=1;
  33. //设置图片移动
    //要是高度获取不到,h=document.documentElement.clientHeight;
  34. var w=document.body.clientWidth-200,
    h=document.body.clientHeight-100; 
  35. function floatdiv(){
  36.  //比较图片是否到达边界，如查到达边界 改变方向;如未到达边界
  37.  if(x>w||x<0) xSpeed= -xSpeed;
  38.  if(y>h||y<0) ySpeed= -ySpeed;
  39.  
  40.  x+=xSpeed;
  41.  y+=ySpeed;
  42.  
  43.  //设置坐标值，起始坐标+速度
  44.  img.style.top=y+"px";
  45.  img.style.left=x+"px";
  46. setTimeout("floatdiv()",10);
  47. }
  48. floatdiv();
  49. </script>

js原生实现网页广告条飞舞的效果的更多相关文章

  1. 网站开发网页广告条不显示，出现ERR_BLOCKED_BY_CLIENT

    原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.

  2. 自定义控件（视图）2期笔记03：自定义控件之使用系统控件（优酷案例之广告条Viewpager）

    1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...

  3. 移动网页广告引入mraid.js使用指南

    在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景: 我开发了移 ...

  4. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  5. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  6. 使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

  7. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  8. 了解 JavaScript （6）– 广告条（Banner)

    在 Web 上冲浪时,常常会见到定期在图像之间切换的广告条.我们可以用 JavaScript 来实现,重复循环显示它们. 创建循环的广告条 RotatingBanner.html 页面中在循环的广告条 ...

  9. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

随机推荐

  1. iOS 字体下载

    iOS可以动态的为系统下载字体,这些字体都下载到了系统的目录下,并且可以被其他应用公用 来看下如何实现动态下载: // 创建下载字体请求描述的准备 NSMutableDictionary *attrs ...

  2. HDD ,SSD和PCIE SSD性能测试

      PCIE SSD   * MB/s = 1,000,000 bytes/s [SATA/600 = 600,000,000 bytes/s] * KB = 1000 bytes, KiB = 10 ...

  3. Solaris环境下使用snoop命令抓包

    (1)报文抓取 Solaris中自带有snoop抓包工具,通过执行相应的命令抓取. 抓取目的地址为10.8.3.250的数据包,并存放到/opt/cap250的文件里 snoop -o /opt/ca ...

  4. 关于网站的一些js和css常见问题的记录

    1. 文字超过宽度,给这个后面超过的文字用...来表示  white-space: nowrap;

  5. 我的第三篇博客（激动激动真激动！！！）A-B Problem

    #210. 差(A-B problem) 题目描述 楠楠在网上刷题,感觉第一题:求两数的和(A+B Problem)太无聊了,于是增加了一题:A-B Problem,难倒了一群小朋友,哈哈. 题目是这 ...

  6. Java课程02-动手动脑

    1.编写一个方法,生成一千个随机数,纯随机数发生器. package random; public class random { public static void main(String[] ar ...

  7. PHP----------php封装的一些简单实用的方法汇总

    1.xml转换成array,格式不对的xml则返回false function xml_parser($str){    $xml_parser = xml_parser_create();    i ...

  8. MYSQL.版本查看-LINUX

    MYSQL.版本查看-LINUX 方式1: 不需登录mysql,登录Linux服务后,执行如下指令: # mysql -V 注意: 那个是大写的V,如果使用小写的v,在root没有设置密码的情况下,就 ...

  9. 捕鱼达人Demo版下载

    链接:https://pan.baidu.com/s/1ihHhikpFXiNJMxa26E8qBw 提取码:npj6

  10. Gartner容器市场指南中国语境:容器成为新常态,灵雀云等本地厂商在选择中占据优势

    在2019年2月“ China Summary Translation: 'Market Guide for Container Management Software'”的报告中,Gartner认为 ...