基于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读取cookies)
Jan 11 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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 class类的用法详细总结
2013/10/17 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
js实现时钟定时器
2020/03/26 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
keras多显卡训练方式
2020/06/10 Python
详解Flask前后端分离项目案例
2020/07/24 Python
标准化管理实施方案
2014/02/25 职场文书
服务标语口号
2014/07/01 职场文书
功夫熊猫观后感
2015/06/10 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android