js漂浮广告实现代码


Posted in Javascript onAugust 15, 2015

本文实例讲述了js实现漂浮广告的方法。分享给大家供大家参考。具体如下:

具体代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="moveobj.js"> </script>
<script type="text/javascript">

var flyimage1, flyimage2, flyimage3

function pagestart(){

 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);


movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>
</head>

<body>
<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A><IMG SRC="img/1.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A><IMG SRC="img/2.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A><IMG SRC="img/3.gif" BORDER=0></a>
</DIV>

</body>
</html>

moveobj.js:

var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
 this.named=chipname;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width+20;
 this.h=height;
 this.xx=0;
 this.yy=0;
 this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
  if (window.innerWidth || window.opera){
  pageX=window.pageXOffset;
   pageW=window.innerWidth-40;
   pageY=window.pageYOffset;
   pageH=window.innerHeight-20;
  }
  else if (document.body){
  pageX=iecompattest().scrollLeft;
   pageW=iecompattest().offsetWidth-40;
   pageY=iecompattest().scrollTop;
   pageH=iecompattest().offsetHeight-20;
  } 

  chip.xx=chip.xx+chip.vx;
  chip.yy=chip.yy+chip.vy;
  
  chip.vx+=vr*(Math.random()-0.5);
  chip.vy+=vr*(Math.random()-0.5);
  if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
  if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
  if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
  if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

  if(chip.xx<=pageX){
  chip.xx=pageX;
   chip.vx=vmin+vmax*Math.random();
   }
  if(chip.xx>=pageX+pageW-chip.w){
  chip.xx=pageX+pageW-chip.w;
   chip.vx=-vmin-vmax*Math.random();
   }
  if(chip.yy<=pageY)
   {chip.yy=pageY;
   chip.vy=vmin+vmax*Math.random();
   }
  if(chip.yy>=pageY+pageH-chip.h)
   {chip.yy=pageY+pageH-chip.h;
   chip.vy=-vmin-vmax*Math.random();
   }

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


  chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
 }
}

运行效果图:

js漂浮广告实现代码

 此特效包含的文件:

js漂浮广告实现代码

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 #Javascript
针对初学者的jQuery入门指南
Aug 15 #Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 #Javascript
在jQuery中处理XML数据的大致方法
Aug 14 #Javascript
JavaScript中var关键字的使用详解
Aug 14 #Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 #Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 #Javascript
You might like
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python入门教程之识别验证码
2017/03/04 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
大学班级文化建设方案
2014/05/06 职场文书
煤矿安全协议书
2014/08/20 职场文书
消防志愿者活动方案
2014/08/23 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
免职通知
2015/04/23 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
检讨书格式
2019/04/25 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python