JS-图片动画效果源码.docVIP

1 雷达扫描 HTML HEAD TITLE图形篇--雷达扫描/TITLE /HEAD BODY bgColor=#fef4d2 onload=RadarPicture() brbr center h2图形篇--雷达扫描/h2 hr width=300 br !-- 案例代码开始 -- script language=JavaScript var deg=0; var r=125; var Light_X=20 var Light_Y=20 var Light_Z=40 var conversion=(2*3.1415926)/360 function RadarPicture(){ Body1.filters.light.addCone(100,100,0,Light_X,Light_Y,10,155,100,150,20); Body1.filters.light.addAmbient(150,155,150,100) var x=0; RadarMove(); } function RadarMove() { Light_X=r+r*Math.cos(deg*conversion); Light_Y=r+r*Math.sin(deg*conversion); deg+=10; if(deg==360) deg=0; Body1.filters[0].moveLight(0,Light_X,Light_Y,Light_Z,1); mytimeout=setTimeout(RadarMove(),100); } /script !-- [Step1]: 这里可以设置雷达扫描的图形名称 -- !-- [Step2]: 在此能够更改图形的宽度和高度 -- img id=Body1 src=Picture002.jpg style=filter: light(); width:200px; height:200px !-- 案例代码结束 -- /BODY /HTML 2 变形扭曲 HTML HEAD TITLE图形篇--变形扭曲/TITLE /HEAD BODY bgcolor=#fef4d2 onload=DistortPicture() brbr center h2图形篇--变形扭曲/h2 hr width=300 br !-- 案例代码1开始 -- script language=JavaScript var i = 1; var j = true; function DistortPicture(){ if(document.all) if(j == true) {i++; } if(i == 100) {i--;j = false} if(i == 10) {i++;j = true } if(j == false) {i--; } Picture.width =150 + i; Picture.height=100 - i; setTimeout(DistortPicture(),60); } /script !-- 案例代码1结束 -- !-- 案例代码2开始 -- !-- [Step1]: 在此可以设置欲扭曲的图形 -- !-- [Step2]: 这里能够更改图形的边界框 -- img src=Picture001.jpg name=Picture border=2 width=381 height=356 !-- 案例代码2结束 -- /BODY /HTML 3 鼠标点击效果 HTML HEAD TITLE图形篇--鼠标点击效果/TITLE /HEAD BODY bgcolor=#fef4d2 onload=MouseClick() brbr center h2图形篇--鼠标点击效果/h2 hr width=300 brbr !-- 案例代码1开始 -- script language=JavaScript var sparksAflyin = 0; var totalSparks = 0; var sparksOn = 1; var ver = navigator.appVersion; var dom = document.getElementById ? 1 : 0; var ie5 = (ver.indexOf(MSIE 5) -1 dom) ? 1 : 0; var n = (document.layers); var ie = (document.all); function MouseClick() { document.onmousedown = mouseDown; i