基于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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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 类相关函数的使用详解
2013/05/10 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
windows下python连接oracle数据库
2017/06/07 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python破解zip加密文件的方法
2018/05/31 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
Python 求向量的余弦值操作
2021/03/04 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
医学生自荐信范文
2013/12/03 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫