设为首页收藏本站
切换到宽版

可爱老人网

 找回密码
 注册会员
报到实习┊可爱家园┊老人茶座┊心灵港湾┊文史漫谈┊菩提树下┊电脑手机┊美食厨艺┊健康老人┊投资理财┊征婚交友 ┊我爱我家┊网海拾贝
原创文学┊诗词雅苑┊金石书画┊摄影天地┊文物收藏┊运动健身┊畅游天下┊开心一刻┊可爱贴图┊影音欣赏┊网站事务 ┊版主交流┊精华旧帖

搜索
可爱老人网»社区 › ◆休闲娱乐◆ › 【影音欣赏】 › 代码特效相册习作
1234下一页
返回列表 发新帖
楼主: 周春祥

代码特效相册习作

[复制链接]
刘树义 该用户已被删除
发表于 2013-4-1 22:45 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

举报

刘树义 该用户已被删除
发表于 2013-4-1 23:02 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

举报

周春祥
 楼主| 发表于 2013-4-1 23:16 | 显示全部楼层
刘树义 发表于 2013-4-1 23:02
底图:1000X700
图片：1000X600

这是你修改的数值吗？
回复 支持 反对

举报

维子
发表于 2013-4-2 10:31 | 显示全部楼层
本帖最后由 维子 于 2013-4-2 10:48 编辑
周春祥 发表于 2013-4-1 20:59
这是编辑图片代码：


http://txt.51dlm.com/www.51dlm.c ... 4e99a758976a96d.txt
             周老师好，这是我作完整的代码，发不出来。
<br /><br /><P align=center>
<DIV align=center>
<DIV style="POSITION: relative; WIDTH: 1100px; TOP: 100px; LEFT: -240px" class=divBorderStyleRelative>
<TABLE border=0 cellSpacing=30 width=1050 background=http://www.keai99.com/data/attachment/album/201303/25/2245457t7zktgntsj7f7m4.jpg bgColor=#505645>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=0 cellSpacing=20 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224545ufgiugt18f9llu1z.jpg>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=1 cellSpacing=10 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224545qpelhnetpu1pkzkk.jpg>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=2 cellSpacing=5 borderColorLight=#060804 borderColorDark=#ee0000 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224546accgrgyzdcoxql1y.gif>
<TBODY>
<TR>
<TD>
<TABLE id=table05 border=0 cellSpacing=0 width=1000 background=http://tp.wj550.com/up/1364222843x1919954346.jpg align=center>
<TBODY>
<TR>
<TD>
<DIV align=center>
<DIV style="POSITION: relative; WIDTH: 950px; TOP: 1px; LEFT: -1px" twffan="done"><IFRAME height=600 marginHeight=0 src="http://txt.51dlm.com/www.51dlm.com/00f18634f80e43f1b4e99a758976a96d.txt" frameBorder=0 width=950 marginWidth=0 scrolling=no></IFRAME></DIV>
<DIV align=center><FONT style="FONT-SIZE: 15px" color=#00ff00><STR></STRONG></FONT>
<P></P></DIV></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<P></P></DIV></DIV>


   这是换了图片的代码，图片一定要是950——600吗？我修改的不一致。：如
950——635,950——720.怎样才能修改一致呢？麻烦你给我看看，错出在什么地方？请赐教
<BODY
background=http://www.laitu.net/di-YTU6.jpg onload=changeimage()>
<div style="position: absolute; width:950px; height: 600px; z-index: 1; left: 65px; top: 130px" id="layer1">
<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=900
// The height of your images (pixels). All pictures should have the same height.
var imgheight=580
// The URL of your images. You may add as many images as you like.
var imgurl=new Array()
imgurl[0]="http://tp.wj550.com/up/1364829880x2073184346.jpg"
imgurl[1]="http://tp.wj550.com/up/1364829955x2073184346.jpg"
imgurl[2]="http://tp.wj550.com/up/1364830034x2073184346.jpg"
imgurl[3]="http://tp.wj550.com/up/1364830103x2073184346.jpg"
imgurl[4]="http://tp.wj550.com/up/1364830185x2073184346.jpg"
imgurl[5]="http://tp.wj550.com/up/1364830259x2073184346.jpg"
imgurl[6]="http://tp.wj550.com/up/1364830316x2073184346.jpg"
imgurl[7]="http://tp.wj550.com/up/1364830387x2073184346.jpg"

// Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
        imgpreload=new Image()
        imgpreload.src=imgurl
}
// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=0
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=0
// Number of sliced cells (the higher this value the slower the script)
var x_slices=10
// Number of sliced rows (the higher this value the slower the script)
var y_slices=10
// 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=1000
var screenheight=580
// 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()",2500)
        }

// - 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>
  <EMBED style="LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" align=right src=http://sc.yhy8.com/UploadFile/731773200/201110516915797.swf width=0 height=0 type=application/octet-stream wmode="transparent" quality="high" >}

回复 支持 反对

举报

周春祥
 楼主| 发表于 2013-4-2 11:07 | 显示全部楼层
维子 发表于 2013-4-2 10:31
http://txt.51dlm.com/www.51dlm.c ... 4e99a758976a96d.txt
             周老师好，这是我作完整的代 ...

好像你漏编了一部分代码，我再仔细看看。
回复 支持 反对

举报

周春祥
 楼主| 发表于 2013-4-2 11:27 | 显示全部楼层
试试看吧：
<BODY
background=http://www.laitu.net/di-YTU6.jpg
onload=changeimage()>
<div style="position: absolute; width:1100 px; height: 700 px; z-index: 1; left: 65px; top: 130px" id="layer1">
<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=1000
// The height of your images (pixels). All pictures should have the same height.
var imgheight=600
// The URL of your images. You may add as many images as you like.
var imgurl=new Array()
imgurl[0]="http://tp.wj550.com/up/1364829880x2073184346.jpg"
imgurl[1]="http://tp.wj550.com/up/1364829955x2073184346.jpg"
imgurl[2]="http://tp.wj550.com/up/1364830034x2073184346.jpg"
imgurl[3]="http://tp.wj550.com/up/1364830103x2073184346.jpg"
imgurl[4]="http://tp.wj550.com/up/1364830185x2073184346.jpg"
imgurl[5]="http://tp.wj550.com/up/1364830259x2073184346.jpg"
imgurl[6]="http://tp.wj550.com/up/1364830316x2073184346.jpg"
imgurl[7]="http://tp.wj550.com/up/1364830387x2073184346.jpg"

// Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
        imgpreload=new Image()
        imgpreload.src=imgurl}
// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=0
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=0

// Number of sliced cells (the higher this value the slower the script)
var x_slices=10

// Number of sliced rows (the higher this value the slower the script)
var y_slices=10

// 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=1000
var screenheight=580

// 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()",2500)
        }
}


// - 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>
  <EMBED style="LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" align=right src=http://sc.yhy8.com/UploadFile/731773200/201110516915797.swf width=0 height=0 type=application/octet-stream wmode="transparent" quality="high" >


回复 支持 反对

举报

周春祥
 楼主| 发表于 2013-4-2 11:57 | 显示全部楼层
维子 发表于 2013-4-2 10:31
http://txt.51dlm.com/www.51dlm.c ... 4e99a758976a96d.txt
             周老师好，这是我作完整的代 ...

试试看吧：
<BODY
background=http://www.laitu.net/di-YTU6.jpg
onload=changeimage()>
<div style="position: absolute; width:1100 px; height: 700 px; z-index: 1; left: 65px; top: 130px" id="layer1">
<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=1000
// The height of your images (pixels). All pictures should have the same height.
var imgheight=600
// The URL of your images. You may add as many images as you like.
var imgurl=new Array()
imgurl[0]="http://tp.wj550.com/up/1364829880x2073184346.jpg"
imgurl[1]="http://tp.wj550.com/up/1364829955x2073184346.jpg"
imgurl[2]="http://tp.wj550.com/up/1364830034x2073184346.jpg"
imgurl[3]="http://tp.wj550.com/up/1364830103x2073184346.jpg"
imgurl[4]="http://tp.wj550.com/up/1364830185x2073184346.jpg"
imgurl[5]="http://tp.wj550.com/up/1364830259x2073184346.jpg"
imgurl[6]="http://tp.wj550.com/up/1364830316x2073184346.jpg"
imgurl[7]="http://tp.wj550.com/up/1364830387x2073184346.jpg"

// Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
        imgpreload=new Image()
        imgpreload.src=imgurl}
// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=0
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=0

// Number of sliced cells (the higher this value the slower the script)
var x_slices=10

// Number of sliced rows (the higher this value the slower the script)
var y_slices=10

// 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=1000
var screenheight=580

// 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()",2500)
        }
}


// - 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>
  <EMBED style="LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" align=right src=http://sc.yhy8.com/UploadFile/731773200/201110516915797.swf width=0 height=0 type=application/octet-stream wmode="transparent" quality="high" >



回复 支持 反对

举报

维子
发表于 2013-4-2 11:57 | 显示全部楼层
本帖最后由 周春祥 于 2013-4-2 12:10 编辑

周春祥 发表于 2013-4-2 11:27 试试看吧：
试试看吧：
  试试看看
回复 支持 反对

举报

维子
发表于 2013-4-2 12:00 | 显示全部楼层
周春祥 发表于 2013-4-2 11:57
试试看吧：

我发出来还是不显示，29楼。不知何故
回复 支持 反对

举报

周春祥
 楼主| 发表于 2013-4-2 12:02 | 显示全部楼层
维子 发表于 2013-4-2 10:31
http://txt.51dlm.com/www.51dlm.c ... 4e99a758976a96d.txt
             周老师好，这是我作完整的代 ...

编辑好了，看一下。
<DIV align=center>
<DIV style="POSITION: relative; WIDTH: 1100px; TOP: 100px; LEFT: -240px" class=divBorderStyleRelative>
<TABLE border=0 cellSpacing=30 width=1050 background=http://www.keai99.com/data/attachment/album/201303/25/2245457t7zktgntsj7f7m4.jpg bgColor=#505645>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=0 cellSpacing=20 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224545ufgiugt18f9llu1z.jpg>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=1 cellSpacing=10 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224545qpelhnetpu1pkzkk.jpg>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=2 cellSpacing=5 borderColorLight=#060804 borderColorDark=#ee0000 width="100%" background=http://www.keai99.com/data/attachment/album/201303/25/224546accgrgyzdcoxql1y.gif>
<TBODY>
<TR>
<TD>
<TABLE id=table05 border=0 cellSpacing=0 width=1000 background=http://tp.wj550.com/up/1364222843x1919954346.jpg align=center>
<TBODY>
<TR>
<TD>
<DIV align=center>
<DIV style="POSITION: relative; WIDTH:950px; TOP: 1px; LEFT: -1px" twffan="done"><IFRAME height=700 marginHeight=0 src="http://upload.ouliu.net/i/20130402114046noc2i.txt" frameBorder=0 width=950 marginWidth=0 scrolling=no></IFRAME></DIV>
<DIV align=center><FONT style="FONT-SIZE: 15px" color=#00ff00><STR></STRONG></FONT>
<P></P></DIV></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

回复 支持 反对

举报

下一页 »
1234下一页
返回列表 发新帖
　　 　　 　　
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2024-11-18 02:50

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表