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预览上传图片发现的问题的解决方法
Nov 25 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
js轮播图代码分享
Jul 14 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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
mysql 字段类型说明
2007/04/27 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python模拟事件触发机制详解
2018/01/19 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
什么是servlet链?
2014/07/13 面试题
师范生免费教育协议书范本
2014/10/09 职场文书
指导教师推荐意见
2015/06/05 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书