masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > teks badan

非常不错的页面特效建议大家看下_典型特效

WBOY

Lepaskan： 2016-05-16 19:12:49

asal

1436 orang telah melayarinya

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

精灵'S blog

<script> <BR>var r; <BR>var a; <BR>var ai; <BR>var n; <BR>var w; <BR>var k; <BR>var inter; <BR>var period=20000; <BR>var dur; <BR>var hdur2; <BR>var hdur; <BR>var z; <BR>var nn; <BR>var donut; <BR>var time; <BR>var id = new Array(); <BR>for(i=0;i<100;i++){ <BR> id[i]=document.getElementById('ik'+i); <BR>} <br><br>function again(){ <BR> if(id){ <BR> for(i=0;i<100;i++){ <BR> id[i].style.backgroundColor='rgb(0,0,0)'; <BR> } <BR> } <BR> r=0; <BR> a=0; <BR> ai=Math.random()/5.0-0.1; <BR> n=Math.floor(Math.random()*17)+3; <BR> w=Math.floor(Math.random()*11)+1; <BR> if(n*w>100){ <BR> n=Math.floor(n/w); <BR> } <BR> k=Math.random()*2.0+0.3; <BR> if(Math.random()<0.5) k=-k; <BR> inter=1+Math.floor(Math.random()*125); <BR> dur = Math.floor(period/inter); <BR> hdur2=dur*dur/4; <BR> hdur = dur/2; <BR> z=2*Math.PI/(n*(1+Math.random()/10)); <BR> nn=Math.floor(Math.random()*n)+1; <BR> donut=Math.random()*10.0-5.0; <BR> time=0; <BR> for(i=0;i<n*w;i++){ <BR> id[i].style.backgroundColor='rgb(' <BR> +Math.round(64+Math.random()*191)+',' <BR> +Math.round(64+Math.random()*191)+',' <BR> +Math.round(64+Math.random()*191)+')'; <BR> } <BR> hey(); <BR>} <br><br><BR>function hey(){ <BR> for(i=0;i<n*w;i++){ <BR> tt=time-hdur; <BR> blah=(Math.sqrt(hdur2-tt*tt)/dur) * (donut+65*Math.cos(k*a+z*i/nn)); <BR> L=blah*Math.cos(i*z+a); <BR> T=blah*Math.sin(i*z+a); <BR> id[i].style.left=Math.round((50+L)*10)/10+'%'; <BR> id[i].style.top =Math.round((50+T)*10)/10+'%'; <BR> id[i].style.width=Math.sqrt(4+Math.floor(L*L+T*T))+"px"; <BR> id[i].style.height=Math.sqrt(4+Math.floor(L*L+T*T))+"px"; <BR> if(Math.random()<0.01){ <BR> id[i].style.backgroundColor='rgb(' <BR> +Math.round(64+Math.random()*191)+',' <BR> +Math.round(64+Math.random()*191)+',' <BR> +Math.round(64+Math.random()*191)+')'; <BR> } <BR> } <BR> a+=ai; <BR> time++; <BR> if(time<dur){ <BR> setTimeout('hey();',inter); <BR> }else{ <BR> setTimeout('again();',inter); <BR> } <BR>} <BR>again(); <BR></script>

<title>精灵'S blog</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css">BODY { 
    FONT-FAMILY: "Courier New", "Courier", monospace; BACKGROUND-COLOR: black 
} 
A { 
    COLOR: #000000; BACKGROUND-COLOR: #88ff88; TEXT-DECORATION: none 
} 
A:hover { 
    COLOR: #88ff88; BACKGROUND-COLOR: #000000 
} 
.ik { 
    LEFT: 50%; POSITION: absolute; TOP: 50%; BACKGROUND-COLOR: #000000; moz-border-radius: 50%; border-radius: 50% 
} 
</style>

<meta content="MSHTML 6.00.3790.1830" name="GENERATOR"> 
 
<p style="TEXT-ALIGN: center"></p> 
<div class="ik" id="ik0"></div> 
<div class="ik" id="ik1"></div> 
<div class="ik" id="ik2"></div> 
<div class="ik" id="ik3"></div> 
<div class="ik" id="ik4"></div> 
<div class="ik" id="ik5"></div> 
<div class="ik" id="ik6"></div> 
<div class="ik" id="ik7"></div> 
<div class="ik" id="ik8"></div> 
<div class="ik" id="ik9"></div> 
<div class="ik" id="ik10"></div> 
<div class="ik" id="ik11"></div> 
<div class="ik" id="ik12"></div> 
<div class="ik" id="ik13"></div> 
<div class="ik" id="ik14"></div> 
<div class="ik" id="ik15"></div> 
<div class="ik" id="ik16"></div> 
<div class="ik" id="ik17"></div> 
<div class="ik" id="ik18"></div> 
<div class="ik" id="ik19"></div> 
<div class="ik" id="ik20"></div> 
<div class="ik" id="ik21"></div> 
<div class="ik" id="ik22"></div> 
<div class="ik" id="ik23"></div> 
<div class="ik" id="ik24"></div> 
<div class="ik" id="ik25"></div> 
<div class="ik" id="ik26"></div> 
<div class="ik" id="ik27"></div> 
<div class="ik" id="ik28"></div> 
<div class="ik" id="ik29"></div> 
<div class="ik" id="ik30"></div> 
<div class="ik" id="ik31"></div> 
<div class="ik" id="ik32"></div> 
<div class="ik" id="ik33"></div> 
<div class="ik" id="ik34"></div> 
<div class="ik" id="ik35"></div> 
<div class="ik" id="ik36"></div> 
<div class="ik" id="ik37"></div> 
<div class="ik" id="ik38"></div> 
<div class="ik" id="ik39"></div> 
<div class="ik" id="ik40"></div> 
<div class="ik" id="ik41"></div> 
<div class="ik" id="ik42"></div> 
<div class="ik" id="ik43"></div> 
<div class="ik" id="ik44"></div> 
<div class="ik" id="ik45"></div> 
<div class="ik" id="ik46"></div> 
<div class="ik" id="ik47"></div> 
<div class="ik" id="ik48"></div> 
<div class="ik" id="ik49"></div> 
<div class="ik" id="ik50"></div> 
<div class="ik" id="ik51"></div> 
<div class="ik" id="ik52"></div> 
<div class="ik" id="ik53"></div> 
<div class="ik" id="ik54"></div> 
<div class="ik" id="ik55"></div> 
<div class="ik" id="ik56"></div> 
<div class="ik" id="ik57"></div> 
<div class="ik" id="ik58"></div> 
<div class="ik" id="ik59"></div> 
<div class="ik" id="ik60"></div> 
<div class="ik" id="ik61"></div> 
<div class="ik" id="ik62"></div> 
<div class="ik" id="ik63"></div> 
<div class="ik" id="ik64"></div> 
<div class="ik" id="ik65"></div> 
<div class="ik" id="ik66"></div> 
<div class="ik" id="ik67"></div> 
<div class="ik" id="ik68"></div> 
<div class="ik" id="ik69"></div> 
<div class="ik" id="ik70"></div> 
<div class="ik" id="ik71"></div> 
<div class="ik" id="ik72"></div> 
<div class="ik" id="ik73"></div> 
<div class="ik" id="ik74"></div> 
<div class="ik" id="ik75"></div> 
<div class="ik" id="ik76"></div> 
<div class="ik" id="ik77"></div> 
<div class="ik" id="ik78"></div> 
<div class="ik" id="ik79"></div> 
<div class="ik" id="ik80"></div> 
<div class="ik" id="ik81"></div> 
<div class="ik" id="ik82"></div> 
<div class="ik" id="ik83"></div> 
<div class="ik" id="ik84"></div> 
<div class="ik" id="ik85"></div> 
<div class="ik" id="ik86"></div> 
<div class="ik" id="ik87"></div> 
<div class="ik" id="ik88"></div> 
<div class="ik" id="ik89"></div> 
<div class="ik" id="ik90"></div> 
<div class="ik" id="ik91"></div> 
<div class="ik" id="ik92"></div> 
<div class="ik" id="ik93"></div> 
<div class="ik" id="ik94"></div> 
<div class="ik" id="ik95"></div> 
<div class="ik" id="ik96"></div> 
<div class="ik" id="ik97"></div> 
<div class="ik" id="ik98"></div> 
<div class="ik" id="ik99"></div> 
<script type="text/javascript"> 
var r; 
var a; 
var ai; 
var n; 
var w; 
var k; 
var inter; 
var period=20000; 
var dur;  
var hdur2; 
var hdur; 
var z; 
var nn; 
var donut; 
var time; 
var id = new Array(); 
for(i=0;i<100;i++){ 
    id[i]=document.getElementById('ik'+i); 
}

function again(){ 
    if(id){ 
        for(i=0;i<100;i++){ 
            id[i].style.backgroundColor='rgb(0,0,0)'; 
        } 
    } 
    r=0; 
    a=0; 
    ai=Math.random()/5.0-0.1; 
    n=Math.floor(Math.random()*17)+3; 
    w=Math.floor(Math.random()*11)+1; 
    if(n*w>100){ 
        n=Math.floor(n/w); 
    } 
    k=Math.random()*2.0+0.3; 
    if(Math.random()<0.5) k=-k; 
    inter=1+Math.floor(Math.random()*125); 
    dur = Math.floor(period/inter);  
    hdur2=dur*dur/4; 
    hdur = dur/2; 
    z=2*Math.PI/(n*(1+Math.random()/10)); 
    nn=Math.floor(Math.random()*n)+1; 
    donut=Math.random()*10.0-5.0; 
    time=0; 
    for(i=0;i<n*w;i++){ 
        id[i].style.backgroundColor='rgb(' 
            +Math.round(64+Math.random()*191)+',' 
            +Math.round(64+Math.random()*191)+',' 
            +Math.round(64+Math.random()*191)+')'; 
    } 
    hey(); 
}

function hey(){ 
    for(i=0;i<n*w;i++){ 
        tt=time-hdur; 
        blah=(Math.sqrt(hdur2-tt*tt)/dur) * (donut+65*Math.cos(k*a+z*i/nn)); 
        L=blah*Math.cos(i*z+a); 
        T=blah*Math.sin(i*z+a); 
        id[i].style.left=Math.round((50+L)*10)/10+'%'; 
        id[i].style.top =Math.round((50+T)*10)/10+'%'; 
        id[i].style.width=Math.sqrt(4+Math.floor(L*L+T*T))+"px"; 
        id[i].style.height=Math.sqrt(4+Math.floor(L*L+T*T))+"px"; 
        if(Math.random()<0.01){ 
            id[i].style.backgroundColor='rgb(' 
                +Math.round(64+Math.random()*191)+',' 
                +Math.round(64+Math.random()*191)+',' 
                +Math.round(64+Math.random()*191)+')'; 
        } 
    } 
    a+=ai; 
    time++; 
    if(time<dur){ 
        setTimeout('hey();',inter); 
    }else{ 
        setTimeout('again();',inter); 
    } 
} 
again(); 
</script> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p> 
<p style="TEXT-ALIGN: center"> </p>

Label berkaitan：

非常不错的页面特效建议大家看下

sumber：php.cn

Artikel sebelumnya：javascript Zifa FormValid 0.1表单验证代码打包下载_表单特效 Artikel seterusnya：Javascript & DHTML 实例编程（教程）基础知识_基础知识

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

Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...

daripada 2024-04-06 15:33:12

0

1

433

Melepaskan paksi X selepas memanggil Chart.zoom(): panduan langkah demi langkah Saya menetapkan strategi tatal kepada setScrollStrategy(AxisScrollStrategies.progressive) ...

daripada 2024-04-04 23:40:56

0

1

1339

return(); tidak berfungsi untuk 1 laluan tetapi berfungsi untuk laluan yang hampir sama Saya mempunyai 2 laluan, satu untuk berhenti melanggan dan satu untuk memulihkan, kedua-du...

daripada 2024-04-04 17:34:09

0

1

311

Bagaimana untuk menggunakan pemilih CSS untuk menyasarkan elemen div yang mengandungi atribut atau teg tertentu? Saya sedang mengusahakan sistem POS yang menjana laman web. Kebanyakan kod adalah propriet...

daripada 2024-04-03 22:25:59

0

1

277

Bagaimana untuk membetulkan ralat React Hydration yang disebabkan oleh menggunakan pemaparan sisi klien dalam React dan Next.js? Digabungkan dengan cangkuk useEffect dalam React. Matlamat saya adalah untuk menggabungkan...

daripada 2024-03-31 09:04:35

0

1

377

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