基于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 eval解析JSON中的注意点介绍
Aug 23 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
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
实用函数9
2007/11/08 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python网络编程实例简析
2014/09/26 Python
Python实现股市信息下载的方法
2015/06/15 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python模拟三级菜单效果
2017/09/11 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
班主任工作年限证明
2014/01/12 职场文书
二年级语文教学反思
2014/02/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
校运动会广播稿300字
2014/10/07 职场文书
十八大标语口号
2014/10/09 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS