Jquery melaksanakan template_jquery mengikat grid

Bagaimanakah laman utama laman web tidak mempunyai sebarang animasi? Saya telah menggunakan Flash As3 untuk menukar gambar sebelum ini, dan kesannya sangat baik, tetapi ia menyusahkan dan sukar untuk diubah. Saya sentiasa mahu membuat sendiri kesan penukaran gambar, tetapi saya selalu fikir ia akan menyusahkan saya mencubanya hari ini dan mendapati ia sebenarnya agak mudah. Walau bagaimanapun, terdapat masalah kecil Dalam mod tidak serasi IE8, penambahan gaya div dengan kesan lutsinar gagal.

Bagaimanapun, saya merakamnya untuk diri saya sendiri, jadi saya tidak akan bercakap lebih banyak lagi. Js tidak dipisahkan daripada halaman dan tiada pemalam dibuat. Tapak web tidak boleh mempunyai beberapa kesan ini, jadi mari kita laksanakannya dahulu. Kesan akhir masih sangat mengagumkan.

Kod JS halaman

Salin kod Kod adalah seperti berikut:

   
   

   

       

           
           
           
           
           
           
           
           
       

       

            8 7                     onclick=" return picChange(6)">6
                        5 4
            3                 title="2" onclick=" return picChange(2)">2                     onclick=" return picChange(1)" class="">1
       

       

            测试介绍文件了啊

   

 css的实现

复制代码 代码如下:

.picMain
{
    margin: auto;
    limpahan: tersembunyi;
    lebar: 1000px;
    ketinggian: 400px;
    jawatan: relatif;
}
.picimg
{
    lebar: 10000px;
    ketinggian: 400px;
    warna latar belakang: #000000;
    jawatan: mutlak;
    atas: 0px;
}
.picRemark
{
    jawatan: mutlak;
    lebar: 500px;
    ketinggian: 50px;
    bawah: 0px;
    kiri: 0px;
    warna: #FFFFFF;
    inden teks: 2em;
}
.picRemark a
{
    warna: #FFFFFF;
    hiasan teks: tiada;
}
.picRemark a:tuding
{
    hiasan teks: garis bawah;
}
.picaction
{
    jawatan: mutlak;
    lebar: 1000px;
    ketinggian: 50px;
    warna latar belakang: #000000;
    penapis: alpha(opacity=50);
    -moz-opacity: 0.5;
    kelegapan: 0.5;
    limpahan: auto;
    bawah: 0px;
    kiri: 0px;
    penjajaran teks: kanan;
}
.picaction a
{
    sempadan: 1px pepejal #C0C0C0;
    lebar: 30px;
    ketinggian: 30px;
    terapung: betul;
    ketinggian garis: 30px;
    hiasan teks: tiada;
    penjajaran teks: tengah;
    warna: #FFFFFF;
    berat fon: tebal;
    jidar atas: 10px;
    paparan: blok;
    jidar-kanan: 10px;
}
.pic
{
    lebar: 1000px;
    ketinggian: 400px;
    terapung: kiri;
}
.picselect
{
    warna latar belakang: #919191;
}