基于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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Python对多属性的重复数据去重实例
2018/04/18 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
详解python中的模块及包导入
2019/08/30 Python
python实现KNN分类算法
2019/10/16 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
学生干部培训方案
2014/06/12 职场文书
委托证明书
2014/09/17 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python