发布您的源码作品！会员登录/控制面版

图片组和

作者：佚名来源：不详发布时间：2006/10/29 发布人：admin

要完成此效果需要两个步骤

第一步：把如下代码加入到<body>区域中

<STYLE>
.spanstyle {
    LEFT: -5000px; POSITION: absolute
}
</STYLE>
<Script>
<-- 
var imgwidth=468
var imgheight=120
var imgurl=new Array()
imgurl[0]="../ts/pic/cgl/haire.gif"
imgurl[1]="../ts/pic/cgl/haire.gif"
imgurl[2]="../ts/pic/cgl/haire.gif"
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=imgurl[i]
}
var x_finalpos=300
var y_finalpos=200
var x_slices=8
var y_slices=3
var pause=10
var screenwidth=800
var screenheight=500
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)
    }
}
-->
</Script>
<Script onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<--
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
}
-->
</Script>

第二步：把“onload=changeimage()”加在<body>标记里
例如：<body onload=changeimage()>

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：图片显示特效

下一篇代码：上下!

精品推荐

阅读排行

· 自己动手输入网页背景颜色代码
· 随机数字生成器
· 礼花背景(一个非常经典的网页背景）
· 鼠标经过文字变色
· 倒计时代码生成器
· [图文] 代码实现生成弹出窗口的特效
· [图文] 星星满天闪烁的背景
· 颜色英文代码全集
· 速度练习　测试你打字的速度
· 爱情游戏测试

相关代码

· 上传图片上传不了?
· [图文] 3幅图片的滑动门变化效果~
· 请问一下，图片跟着网页上下移动而动，应该怎么样..
· [图文] html的图片不知用什么简单的方法能输入代码..
· 图片怎么插入
· 如何使用vc++来读取CSV格式的图片
· 请教！同一ID下图片切换，有演示！
· 请问怎么样编写代码实现图片的锐化效果？
· 如和将SQL数据库里的image图片2进制。读到控件上？..
· 在ASP.NET中将图片上传到服务器端并验证上传成功且..