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 ajax调用WCF服务实例
Jul 16 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JS实现网页时钟特效
Mar 25 Javascript
AngularJS实现多级下拉框
Mar 25 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
js随机生成一个验证码
2017/06/01 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
小程序日历控件使用方法详解
2018/12/29 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
借条如何写
2015/05/26 职场文书