Rumah >hujung hadapan web >tutorial js >Jquery melaksanakan template_jquery mengikat grid

Jquery melaksanakan template_jquery mengikat grid

WBOY
WBOYasal
2016-05-16 16:17:291159semak imbas

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:


   
   

   

       

           
           
           
           
           
           
           
           
       

       
       

            测试介绍文件了啊

   



 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;
}
Kenyataan:
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 sebelumnya:Bercakap secara ringkas tentang kemahiran penggunaan semula mod_javascript kod javascriptArtikel seterusnya:Bercakap secara ringkas tentang kemahiran penggunaan semula mod_javascript kod javascript

Artikel berkaitan

Lihat lagi