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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 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
初探PHP5
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
php object转数组示例
2014/01/15 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
javascript中的this详解
2014/12/08 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
几种tab切换详解
2017/02/03 Javascript
原生js实现放大镜
2017/02/20 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue实现分页组件
2020/06/16 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
利用Django模版生成树状结构实例代码
2019/05/19 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python scipy卷积运算的实现方法
2019/09/16 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
护士自荐信范文
2013/12/15 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
护理个人求职信范文
2014/01/08 职场文书
一年级学生评语大全
2014/04/21 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL