masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > teks badan

3张图片循环组和(很有动感)_图象特效

WBOY

Lepaskan： 2016-05-16 19:27:44

asal

1090 orang telah melayarinya

<!--要完成此效果需要两个步骤

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

<style> 
.spanstyle { 
    LEFT: -5000px; POSITION: absolute 
} 
</style> 
<script> 
<!--  
var imgwidth=468 
var imgheight=120 
var imgurl=new Array() 
imgurl[0]="/files/pic/20050817/200581702204033863.gif" 
imgurl[1]="/files/pic/20050817/200581702204648587.gif" 
imgurl[2]="/files/pic/20050817/200581702204999274.jpg" 
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]+"' alt="3张图片循环组和(很有动感)_图象特效" >" 
            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> 
 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

3张图片循环组和(很有动感)

sumber：php.cn

Artikel sebelumnya：用户输入密码的强度_javascript技巧 Artikel seterusnya：本窗口将在秒后自动关闭_javascript技巧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

2

2015

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2179

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1838

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1730

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1750

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan