基于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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
window.onload使用指南
Sep 13 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
vue中的适配px2rem示例代码
Nov 19 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue 实现动态路由的方法
Jul 06 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 变量类型的强制转换
2009/10/23 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php截取字符串函数分享
2015/02/02 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python生成随机数组的方法小结
2017/04/15 Python
python将unicode转为str的方法
2017/06/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python 控制终端输出文字的实例
2019/07/12 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
工厂会计员职责
2014/02/06 职场文书
付款委托书范本
2014/10/05 职场文书
个人年终总结结尾
2015/03/06 职场文书
2016春节放假通知范文
2015/08/18 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL