Maison > Article > interface Web > js css pour réaliser des compétences de partage de code d'album en feuilletant les pages de haut en bas

js css pour réaliser des compétences de partage de code d'album en feuilletant les pages de haut en bas

WBOYoriginal: 2016-05-16 15:44:341168parcourir

Il s'agit d'un code d'effets spéciaux basé sur js css pour réaliser un retournement de page de haut en bas des albums photo. L'album peut être basculé dans les directions supérieure et inférieure. Il s'agit d'un code source d'effets spéciaux de diaporama très pratique.
Laissez-moi d'abord vous montrer les rendus :

Démonstration d'effet Téléchargement du code source

Le diaporama jQuery avec le code carrousel de miniatures partagé avec vous est le suivant

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <title>js+css实现上下翻页相册</title>
 
 <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
 
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/demo.js"></script>
 </head>
 
 <body>
 <div class="container_12" id="wrapper">
 <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />
 
 <!-- relevant for the tutorial - start -->
 <div class="grid_6 prefix_1 suffix_1" id="gallery">
  <div id="pictures">
  <img src="images/picture1.png" alt="" />
  <img src="images/picture2.png" alt="" />
  <img src="images/picture3.png" alt="" />
  <img src="images/picture4.png" alt="" />
  <img src="images/picture5.png" alt="" />
  </div>
  
  <div class="grid_3 alpha" id="prev">
  <a href="#previous">&laquo; Previous Picture</a>
  </div>
  <div class="grid_3 omega" id="next">
  <a href="#next">Next Picture &raquo;</a>
  </div>
 </div>
 <!-- relevant for the tutorial - end -->

  
 </body>
</html>

Ce qui précède est le code CSS js pour implémenter le retournement de page de haut en bas pour tout le monde. J'espère que vous l'aimerez.

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：Le composant easyui Draggable implémente drag effect_jqueryArticle suivant：Le composant easyui Draggable implémente drag effect_jquery

Articles Liés

Voir plus