Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte

黄舟
Freigeben: 2017-01-18 13:30:49
Original
1385 Leute haben es durchsucht

Kurzes Tutorial

Dies ist eine sehr coole Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte. Diese Vorlage verwendet die CSS3-3D-Transformation, um einen 3D-Würfelrotationseffekt zu erzeugen, sodass jedes Element beim Umschalten einen Würfelrotationseffekt zeigt.

Verwendung

HTML-Struktur

Die HTML-Struktur besteht aus zwei Teilen: nav.cd-3d-portfolio-navigation ist die Navigation des Projekts und div.projects, die verwendet für jeden Paketartikel.

<div class="cd-3d-portfolio">
  <nav class="cd-3d-portfolio-navigation">
    <div class="cd-wrapper">
      <h1>3D Portfolio Template</h1>
         
      <ul>
        <li><a href="#0" class="selected">Filter 1</a></li>
        <li><a href="#0">Filter 2</a></li>
        <li><a href="#0">Filter 3</a></li>
      </ul>
    </div>
  </nav> <!-- .cd-3d-portfolio-navigation -->
   
  <div class="projects">
    <ul class="row">
      <li class="front-face selected project-1">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 1</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
  
      <li class="right-face project-2">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 2</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
  
      <li class="right-face project-3">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 3</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
    </ul> <!-- .row -->
   
    <ul class="row">
      <!-- projects here -->
    </ul> <!-- .row -->
   
    <ul class="row">
      <!-- projects here -->
    </ul> <!-- .row -->
  </div><!-- .projects -->
</div>
Nach dem Login kopieren

JavaScript

Um den 3D-Effekt zu erzielen, wird in der Vorlage ein Portfolio3D-Objekt erstellt und die bindEvents-Funktion zum Binden von Ereignissen verwendet.

function Portfolio3D( element ) {
  //define a Portfolio3D object
  this.element = element;
  this.navigation = this.element.children(&#39;.cd-3d-portfolio-navigation&#39;);
  this.rowsWrapper = this.element.children(&#39;.projects&#39;);
  this.rows = this.rowsWrapper.children(&#39;.row&#39;);
  this.visibleFace = &#39;front&#39;;
  this.visibleRowIndex = 0;
  this.rotationValue = 0;
  //animating variables
  this.animating = false;
  this.scrolling = false;
  // bind portfolio events
  this.bindEvents();
}
  
if( $(&#39;.cd-3d-portfolio&#39;).length > 0 ) {
  var portfolios3D = [];
  $(&#39;.cd-3d-portfolio&#39;).each(function(){
    //create a Portfolio3D object for each .cd-3d-portfolio
    portfolios3D.push(new Portfolio3D($(this)));
  });
}
Nach dem Login kopieren

Das Attribut „visibleFace“ wird zum Speichern der aktuell sichtbaren Fläche des Würfels verwendet.

Wenn der Benutzer einen bestimmten Elementtyp dreht, wird die Methode showNewContent() verwendet, um die richtige Würfelfläche anzuzeigen und die Elemente in ul.row zu drehen.

Portfolio3D.prototype.bindEvents = function() {  
var self = this;    
this.navigation.on(&#39;click&#39;, &#39;a:not(.selected)&#39;, function(event){    
//update visible projects when clicking on the filter    
event.preventDefault();    
if( !self.animating ) {      
self.animating = true;      
var index = $(this).parent(&#39;li&#39;).index();             
//show new projects      
self.showNewContent(index);        
//update filter selected element      
//..    
}  
});    
//...
};
Nach dem Login kopieren

Das Obige ist der Inhalt der Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!