图片打碎后再组合起来,而且是几张图片交替出现

最新推荐文章于 2025-09-05 11:22:47 发布

泡面之夏

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：脚本文章标签： javascript image distance timer function variables

本文链接：https://blog.youkuaiyun.com/xiazhijiang520/article/details/3436791

脚本专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片碎片效果动画，该动画通过将图片切割为多个小块并随机散布，之后再逐渐重组回原始图片的方式，展示了一个动态且吸引人的视觉效果。文章详细解释了关键变量设置及动画过程。

请将下面的原代码插入到下面

<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]="a048.gif"
imgurl[1]="a049.gif"
imgurl[2]="a052.gif"

// 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

// - End of JavaScript - -->
</SCRIPT>
<SCRIPT>

</SCRIPT>

把<body>中的内容改为