基于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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
javascript中length属性的探索
Jul 31 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
Vue实现验证码功能
Dec 03 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
jquery中获取id值方法小结
2013/09/22 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
js序列化和反序列化的使用讲解
2019/01/19 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Django实现简单的分页功能
2021/02/22 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
英语故事演讲稿
2014/04/29 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
经济国贸专业求职信
2014/06/18 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
单位更名证明
2015/06/18 职场文书
政审证明材料
2015/06/19 职场文书
班主任工作总结范文
2015/08/13 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
MSSQL基本语法操作
2022/04/11 SQL Server