基于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 datepicker 使用方法
May 20 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
第一个无线电台是由谁发明的
2021/03/01 无线电
用PHP来计算某个目录大小的方法
2014/04/01 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
详解Document.Cookie
2015/12/25 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python编程实现希尔排序
2017/04/13 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
pandas数据集的端到端处理
2019/02/18 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
Why we need EJB
2016/10/20 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
公司保密管理制度
2015/08/04 职场文书