首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
图片特效
> 正文
拆分后的图片组合成一张完整的图 特效
2011-03-28 图片特效 496℃
脚本说明: 第一步:把如下代码加入<body>区域中 <STYLE> .spanstyle { LEFT: -5000px; POSITION: absolute } </STYLE> <SCRIPT> <!-- Beginning of JavaScript - // The width of your images (pixels). All pictures should have the same width. var imgwidth=200 // The height of your images (pixels). All pictures should have the same height. var imgheight=90 // The URL of your images. You may add as many images as you like. var imgurl=new Array() imgurl[0]="/images/tx/meinv.jpg" imgurl[1]="/images/tx/3.jpg" imgurl[2]="/images/tx/4.jpg" // Do not edit this block. var imgpreload=new Array() for (i=0;i<=imgurl.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgurl[i] } // Final horizontal position of the image: distance to the left margin of the window var x_finalpos=300 // Final vertical position of the image: distance to the top margin of the window var y_finalpos=200 // Number of sliced cells (the higher this value the slower the script) var x_slices=8 // Number of sliced rows (the higher this value the slower the script) var y_slices=3 // Speed of the reassembling effect. More means slower. var pause=10 // The width and heigth of the zone where the debris of the images are spread (pixels) var screenwidth=800 var screenheight=500 // Do not change the variables below var x_step=new Array() var y_step=new Array() var x_randompos=0 var y_randompos=0 var i_loop=0 var max_loop=20 var i_image=0 var width_slice=Math.floor(imgwidth/x_slices) var height_slice=Math.floor(imgheight/y_slices) var cliptop=0 var clipbottom=height_slice var clipleft=0 var clipright=width_slice var spancounter=0 function initiate() { cliptop=0 clipbottom=height_slice clipleft=0 clipright=width_slice i_loop=0 spancounter=0 if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_randompos=Math.ceil(screenwidth*Math.random()) y_randompos=Math.ceil(screenheight*Math.random()) thisspan.posLeft=x_randompos thisspan.posTop=y_randompos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright+=width_slice spancounter++ } clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice } } explode_IE() } function changeimage() { spancounter=0 for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") thisspan.posLeft=-5000 thisspan.posTop=-5000 spancounter++ } } spancounter=0 if (i_image>imgurl.length-1) {i_image=0} for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisinnerspan=eval("span"+spancounter) thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>" spancounter++ } } i_image++ initiate() } function explode_IE() { spancounter=0 if (i_loop<=max_loop-1) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop) y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop) thisspan.posLeft+=x_step[spancounter] thisspan.posTop+=y_step[spancounter] spancounter++ } } i_loop++ var timer=setTimeout("explode_IE()",pause) } else { spancounter=0 clearTimeout(timer) var timer=setTimeout("changeimage()",2000) } } // - End of JavaScript - --> </SCRIPT> <SCRIPT> <!-- Beginning of JavaScript - if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { document.write("<span id='span"+spancounter+"' class='spanstyle'></span>") spancounter++ } } spancounter=0 } // - End of JavaScript - --> </SCRIPT> 第二步:把<body>中的内容改为: <body onload=changeimage()>
相关特效代码
无相关信息
热门特效代码
js图片自动切换代码
CSS实现区域内等比例放大缩小图片
JS图片切换效果
飘动图片广告代码
鼠标经过图片变大
简单高效的javascript 幻灯片播放
JavaScript封装的平滑图片滚动,
点击图片出现大图
图片局部放大效果特效
图片上下左右拉伸效果特效
推荐特效代码
点击按钮淡入淡出弹出图文信息
探照灯效果图片特效代码
简单高效的javascript 幻灯片播放
飘动图片广告代码
JavaScript封装的平滑图片滚动,
超酷超绚精美图片展示效果代码