基于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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
node.js中watch机制详解
Nov 17 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 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随机取mysql记录方法小结
2014/12/27 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python批量图片处理简单示例
2019/08/06 Python
python解释器spython使用及原理解析
2019/08/24 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
社会学专业求职信
2014/02/24 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
授权委托书
2015/01/28 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
小学工作总结2015
2015/05/04 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
python标准库ElementTree处理xml
2022/05/20 Python