recherche

Maison >interface Web >tutoriel CSS >Fausse barre de navigation de la page d'accueil Qiji DIV+CSS+JS [Exemple de code]_Échange d'expérience

Fausse barre de navigation de la page d'accueil Qiji DIV+CSS+JS [Exemple de code]_Échange d'expérience

WBOY
WBOYoriginal
2016-05-16 12:07:562304parcourir

Auteur Zi Shu
Un effet de la page d'accueil de Keqiji Aujourd'hui, quelqu'un m'a demandé comment je l'avais écrit, alors je l'ai réécrit dans la soirée, d'ailleurs, j'ai réorganisé la mise en page
Vous pouvez jeter un œil au Keqiji ; page d'accueil en premier. L'effet : http://shanghai.kijiji.cn
J'ai essayé de ne pas utiliser la méthode position:absolute ; travailler sur le site Keqiji ; je ne sais vraiment pas comment c'était écrit à cette époque
Ce qui suit est le rendu :


Ce qui suit est la partie mise en page

Copier le code Le code est le suivant :

>



div>


Ce qui suit est la partie CSS : CSS n'est toujours pas optimisé



Copier le code
Le code est le suivant :



以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写的比较烂，但效果是出来了；
复制代码 代码如下 :


 var k = Math.floor(Math.random()*5+1); 
 for(i=1; i <6; i++){
  if( i==k){
   document.getElementById("info"+i).className="sw";
   document.getElementById("tag"+i).className="ha";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info"+i).className="hd";
  }
 }
function kijijitag(tag){ 
 for(i=1; i <6; i++)
 {
  if (i==tag)
{ 
   document.getElementById("info"+i).className="sw";
   document.getElementById("tag"+i).className="ha";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info"+i).className="hd";
   document.getElementById("tag"+i).className="";
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="";
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
  } 
 }
}


Voici les quatre images utilisées :

按此在新窗口打开图片


Regardez l'effet !

[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter
]
Instructions particulières :

1. La partie CSS n'est pas très claire car j'avais un peu le vertige en l'écrivant
2. Les cinq TAG ont été modifiés de manière aléatoire
3. une partie est toujours Cela peut être plus rationalisé, mais il doit être pris en charge par CSS
Déclaration：
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
Article précédent：CSS recommandé pour créer des options d'affichage classiques déclenchées par la sourisArticle suivant：CSS recommandé pour créer des options d'affichage classiques déclenchées par la souris

Articles Liés

Voir plus