基于javascript实现全屏漂浮广告


Posted in Javascript onMarch 31, 2016

本文实例为大家分享javascript实现全屏漂浮广告,供大家参考,具体内容如下

主要使用方法

网页可见区域宽:document.body.clientWidth;
网页可见区域高:document.body.clientHeight;

网页可见区域宽:document.body.offsetWidth (包括边线的宽);
网页可见区域高:document.body.offsetHeight (包括边线的宽); 

setInterval

setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。

setInterval动作的语法格式如下:

setInterval(function,interval[,arg1,arg2,......argn])
   setInterval(object,methodName,interval[,arg1,arg2,.....argn])

      第一种格式是标准动作面板中setInterval函数的默认语法,第二种格式是在专家模式动作中使用的方法。
      参数function是一个函数名或者一个对匿名函数的引用。
      object参数指定从Object对象派生的对象。methodName制定object参数中要调用的方法。
      interval制定对function或methodName调用两次之间的时间,单位是毫秒。后面的arg1等是可选的参数,用于制定传递给function或是methodName的参数。
      setInterval它设置的时间间隔小于动画帧速(如每秒10帧,相当于100毫秒),则按照尽可能接近interval的时间间隔调用函数。而且必 须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速,则只用在每次播放头进入某一帧是才调用,以 减小每次刷新屏幕的影响。

clearInterval

clearInterval动作的作用是清除对setInterval函数的调用

它的语法格式如下:
      clearInterval(intervalid);   //intervalid是调用setInterval函数后返回的对象。 

广告移动效果 实例

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>简单JS动画实例 广告移动效果</title>
  </head>
  <body>
    <div id="one" style="background-color:red; position:absolute; left:0; top:0; height:100px; height:100px; ">
      移动广告
    </div>
 
    <script type="text/javascript">
      var x=0;    //对象X轴位置
      var y=0;    //对象Y轴位置
      var xs = 10;  //对象X轴移动速度
      var ys = 10;  //对象Y轴移动速度
 
      var one = document.getElementById('one'); 
 
      function move(){
        x += xs; 
        y += ys; 
        one.style.left = x; 
        one.style.top = y; 
        if (x > document.body.clientWidth - one.offsetWidth-20 || x<0) {
          xs = -1*xs;     //速度取反
        }
 
        if (y > document.body.clientHeight - one.offsetHeight-20 || y<0){
          ys = -1*ys; 
        }
      }
      var obj = setInterval('move()', 100); 
 
      one.onmouseover = function(){  //
        clearInterval(obj); 
      }
 
      one.onmouseout = function (){
        obj = setInterval('move()', 100); 
      }
 
    </script>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 #Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 #Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 #Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 #Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 #Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 #Javascript
You might like
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP速成大法
2015/01/30 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
js 操作css实现代码
2009/06/11 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现CET查分的方法
2015/03/10 Python
Python 内置函数complex详解
2016/10/23 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python如何存储数据到json文件
2020/03/09 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
项目建议书怎么写
2014/05/15 职场文书
李开复演讲稿
2014/05/24 职场文书
门店业绩提升方案
2014/06/08 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏