热门标签:   个人网站   个人网页   WAP网站   网页特效   网页教程   收藏本站   设为主页  
首 页   个人网站   个人博客   WAP网站   网页特效   网页教程   软件教程   我要参展
帐 号: 密 码:
 
网站及资源搜索:  
 
  当前位置 > 中国个人网页秀-> 网页特效-> 页面特效-> 图形图像-> 自由浮动图像特效
自由浮动图像特效
整理:Cnwshow.Com   来源:Internet   整理时间:2008-8-22

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自由浮动图像特效</title>
<script type="text/javascript">

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);
  }
}
</script>
<script type="text/javascript">


//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
flyimage1=new Chip("flyimage1",47,68);
flyimage2=new Chip("flyimage2",47,68);
flyimage3=new Chip("flyimage3",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
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>
<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="#"><IMG SRC="mini_01.jpg" BORDER=0></a>
</DIV>

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

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="#"><IMG SRC="mini_03.jpg" BORDER=0></a>
</DIV>
</body>
</html>

运行代码预览特效
  图形图像 热门点击
·图片翻页效果代码
·自由变化大小的图片
·给图片加注释
·向上下左右滚动图片的特效
·像篮球一样跳动的图片
·水中倒影
·自由浮动图像特效
·鼠标让图片震动
·图片渐渐显隐
·图片渐渐显示
  酷站推荐
关于本站  联系本站  免责声明  使用帮助  网站搜索  网站地图
Copyright © 2005-2008 Cnwshow.Com Inc All Rights Reserved 中国个人网页秀
技术支持:网秀科技   QQ群:36941957  客服QQ:151483161  粵ICP备05134415号