Maison > interface Web > js tutoriel > le corps du texte

Jquery implémente la liaison de grille template_jquery

WBOY
Libérer: 2016-05-16 16:17:29
original
1132 Les gens l'ont consulté

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">

    图片切换
   
   
   


   

       

           
           
           
           
           
           
           
           
       

       
       

            测试介绍文件了啊

   



 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;
>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!