基于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 图片等比例缩放代码
May 13 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
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和ptions/Info函数集介绍
2013/06/19 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php实现简单爬虫的开发
2016/03/28 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python验证码识别的实例详解
2016/09/09 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
节约用水标语
2014/06/11 职场文书
绿色出行口号
2014/06/18 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2015年教师节活动总结
2015/03/20 职场文书
具结保证书范本
2015/05/11 职场文书
体育教师教学随笔
2015/08/15 职场文书
2019入党申请书格式
2019/06/25 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python