网页特效
的分类:
鼠标特效
┆
页面特效
┆
背景特效
┆
导航菜单
┆
状态栏类
┆
文本特效
┆
链接特效
┆
图形特效
┆
窗口特效
┆
按钮特效
┆
CSS相关
网页特效
的分类:
时间日期
┆
代码生成
┆
计数转换
┆
游戏娱乐
┆
系统相关
┆
黑客性质
┆
综合特效
你现在的位置:
首页
>>
网页特效
>>
图形特效
>> 正文
文章标题:
自由移动的多幅图片
我来说两句
浏览:
┆
来源:网络
┆
作者:admin
┆
发表时间:2008-4-30
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|eZhannet.com/Js|--- 自由移动的多幅图片</title> </head> <body onLoad="if (document.all||document.layers) sTaRt()"> <script language="JavaScript"> <!-- //修改下面的图像地址,可增加或减少图像,图像数量不得少于二幅 Pic=new Array('http://file.ezhannet.com/2008-4-22/love.gif','http://file.ezhannet.com/2008-4-22/k0212.gif','http://file.ezhannet.com/2008-4-22/pao_3366ff.gif') //Smoothness of animation depends on the number of images and they're file size. MaxSpeed=5; MinSpeed=2; load = new Array() for(i=0; i < Pic.length; i++) { load[i] = new Image(); load[i].src = Pic[i]; } amount=Pic.length; ns=(document.layers)?1:0; if (ns){ for (i=0; i < amount; i++){ document.write("<LAYER NAME='netscape"+i+"' LEFT=0 TOP=0><img name='netpics' src="+load[i].src+"></LAYER>")} } else{ document.write("<div style='position:absolute;top:0px;left:0px'><div style='position:relative'>"); for (i=0; i < amount; i++){ document.write("<img id='explorer' src='"+load[i].src+"' style='position:absolute;top:0px;left:0px'>")} document.write("</div></div>") } VB=0; HB=0; R=new Array(); PB=new Array(); RD=new Array(); Y=new Array(); X=new Array(); D=new Array(); SP=new Array(); BY=new Array(); BX=new Array(); for (i=0; i < amount; i++){ Y[i]=10; X[i]=10; D[i]=Math.floor(Math.random()*70+10); SP[i]=Math.floor(Math.random()*MaxSpeed+MinSpeed); } function Curve(){ plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5) for (i=0; i < amount; i++){ R[i]=Math.floor(Math.random()*plusMinus.length); RD[i]=plusMinus[R[i]]; } setTimeout('Curve()',1500); } function MoveRandom(){ var H=(document.layers)?window.innerHeight:document.body.clientHeight; var W=(document.layers)?window.innerWidth:document.body.clientWidth; var YS=(document.layers)?window.pageYOffset:document.body.scrollTop; var XS=(document.layers)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < amount; i++){ BY[i]=-load[i].height; BX[i]=-load[i].width; PB[i]=D[i]+=RD[i]; y = SP[i]*Math.sin(PB[i]*Math.PI/180); x = SP[i]*Math.cos(PB[i]*Math.PI/180); if (D[i] < 0) D[i]+=360; Y[i]+=y; X[i]+=x; VB=180-D[i]; HB=0-D[i]; //Corner rebounds! not necessary but looks nice. if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;} if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;} if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;} if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;} //Edge rebounds! if (Y[i] < 1) {Y[i]=1;D[i]=HB;} if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;} if (X[i] < 1) {X[i]=1;D[i]=VB;} if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;} var layer=(document.layers)?document.layers['netscape'+i]:explorer[i].style; layer.top=Y[i]+YS; layer.left=X[i]+XS; } setTimeout('MoveRandom()',10); } function sTaRt(){Curve();MoveRandom()} //--> </script> </body> </html>
提示:
可以修改再运行
错误报告
添加收藏
下载保存
全选复制
预览效果
页面标签:
自由
移动
图片
上一页:
可控制的逐渐放大缩小图片
下一页:
特殊的(破碎式)图片显示效果
相关文章:
·
左侧上下移动的图片
·
鼠标经过箭头时,图片会向左或向右横向移动
·
用鼠标移动显示的图片类似google地图
·
可控制的逐渐放大缩小图片
·
图片播放器
·
特殊的(颜色块)图片显示效果
·
明暗变化的二张图片
·
自动放大并点亮图片
·
跟随鼠标的二张图片
·
撞壁自动变换的图片效果
网友评论:
自由移动的多幅图片
我来说两句
网友留言
暂无留言!
本栏热门
本站推荐
热评文章
广告信息