Jquery implémente la liaison de grille template_jquery

Comment la page d'accueil du site Web peut-elle ne pas avoir d'animation ? J'ai déjà utilisé Flash As3 pour changer d'image, et l'effet est très bon, mais il est gênant et difficile à modifier. J'ai toujours voulu créer moi-même un effet de changement d'image, mais j'ai toujours pensé que ce serait gênant. Je l'ai essayé aujourd'hui et j'ai découvert que c'était en fait relativement simple. Il y a cependant un petit problème. Dans le mode incompatible d'IE8, l'ajout de style d'un div avec un effet transparent échoue. Cependant, j'ai utilisé Google et le test de compatibilité IE8 était ok.

Quoi qu'il en soit, je l'ai enregistré pour moi-même, donc je n'en dirai pas grand-chose de plus. Le js n'est pas séparé de la page, et aucun plug-in n'est réalisé. Un site Web ne peut pas avoir certains de ces effets, alors mettons-les d’abord en œuvre. L'effet final est toujours très impressionnant.

Code JS de la page

Copier le code Le code est le suivant :

 

复制代码 代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

   
   
   
   

   

       

           
           
           
           
           
           
           
           
       

       

            8 7                     onclick=" return picChange(6)">6
                        5&Lt ;/a> ; 4
            3                 title="2" onclick=" return picChange(2)">2                     onclick=" return picChange(1)" class="">1
       

       

            测试介绍文件了啊

   

 css的实现

复制代码 代码如下 :

.picMain
{
    marge : auto;
    débordement : caché ;
    largeur : 1000px ;
    hauteur : 400px ;
    position : relative ;
>
.picimg
{
    largeur : 10000px ;
    hauteur : 400px ;
    couleur d'arrière-plan : #000000;
    position : absolue ;
    haut : 0px;
>
.picRemarque
{
    position : absolue ;
    largeur : 500 px ;
    hauteur : 50px ;
    en bas : 0px ;
    gauche : 0px;
    couleur : #FFFFFF;
    retrait de texte : 2em ;
>
.picRemarquez un
{
    couleur : #FFFFFF;
    décoration de texte : aucune ;
>
.picRemarquez a:hover
{
    décoration de texte : souligner ;
>
.picaction
{
    position : absolue ;
    largeur : 1000px ;
    hauteur : 50px ;
    couleur d'arrière-plan : #000000;
    filtre : alpha(opacité=50);
    -moz-opacité : 0,5 ;
    opacité : 0,5 ;
    débordement : auto ;
    en bas : 0px ;
    gauche : 0px;
    aligner le texte : à droite ;
>
.picaction a
{
    bordure : 1px solide #C0C0C0;
    largeur : 30 px ;
    hauteur : 30px ;
    flotter : à droite ;
    hauteur de ligne : 30 px ;
    décoration de texte : aucune ;
    text-align: center;
    couleur : #FFFFFF;
    poids de la police : gras ;
    marge supérieure : 10 px ;
    affichage : bloquer ;
    marge droite : 10px ;
>
.pic
{
    largeur : 1000px ;
    hauteur : 400px ;
    flotter : gauche ;
>
.picselect
{
    couleur d'arrière-plan : #919191;
>