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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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 curl参数的详解
2013/06/17 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Django实现发送邮件功能
2019/07/18 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
关于爱情的广播稿
2014/01/16 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
mysql 带多个条件的查询方式
2021/06/05 MySQL