基于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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
浅谈js原生拖放
Nov 21 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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中iconv函数使用方法
2008/05/24 PHP
php实现httpclient类示例
2014/04/08 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python django集成cas验证系统
2014/07/14 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python生成器generator用法示例
2018/08/10 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
合作意向书范本
2014/03/31 职场文书
法人授权委托书样本
2014/09/19 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
交通事故被告答辩状
2015/05/22 职场文书
母亲节感言
2015/08/03 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android