基于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源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
js实现微博发布小功能
2017/01/12 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
详解Python 3.10 中的新功能和变化
2021/04/28 Python