基于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从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
实用函数7
2007/11/08 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
33道php常见面试题及答案
2015/07/06 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现多选框的操作
2020/06/24 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python中shutil模块的学习笔记教程
2017/04/04 Python
python编程实现归并排序
2017/04/14 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
个人简历的自荐信
2013/10/23 职场文书
党校培训思想汇报
2013/12/30 职场文书
给物业的表扬信
2014/01/21 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫