基于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.fn和jQuery.prototype区别介绍
Oct 05 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
js生成随机数的方法实例
Oct 16 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 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缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
手机端转换rem适应
2017/04/01 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python操作MySQL数据库具体方法
2013/10/28 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python中append实例用法总结
2019/07/30 Python
python提取xml里面的链接源码详解
2019/10/15 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python 实现一个计时器
2020/07/28 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
长城导游词300字
2015/01/30 职场文书
旗帜观后感
2015/06/08 职场文书
2019同学聚会主持词
2019/05/06 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
canvas实现贪食蛇的实践
2022/02/15 Javascript