Table des matières
Presentation Slideshow
Slider #2
Maison interface Web tutoriel HTML jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose

jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose

Jun 21, 2016 am 09:01 AM

简要教程

这是一款简单的使用jQuery和CSS3制作类似PPT的演讲稿幻灯片插件。该演讲稿幻灯片插件可以通过键盘上下左右方向键来控制,并且左上角带有菜单按钮,通过菜单项可以选择相应的幻灯片页面。

查看演示       下载插件

使用方法

HTML结构

该演讲稿幻灯片的HTML结构有2个主要的部分:一个

<div class="cd-slideshow-wrapper">  <nav class="cd-slideshow-nav">    <button class="cd-nav-trigger">      Open Navigation      <span aria-hidden="true"></span>    </button>         <div class="cd-nav-items">      <ol>        <li><a href="#slide-1">Slide 1</a></li>        <li>          <a href="#slide-2">Slide 2</a>          <ol class="sub-nav">            <li><a href="#slide-2">Slide 2 - Sub 1</a></li>            <!-- other sub-slide links here -->          </ol>        </li>        <li><a href="#slide-3">Slide 3</a></li>        <!-- other slide links here -->      </ol>    </div> <!-- .cd-nav-items -->  </nav> <!-- .cd-slideshow-nav -->     <ol class="cd-slideshow">    <li class="visible" id="slide-1">      <div class="cd-slider-content">        <div class="content-wrapper">          <h2 id="Presentation-Slideshow">Presentation Slideshow</h2>          <p>A simple presentation template in CSS & jQuery.</p>        </div>      </div>    </li>      <li id="slide-2">      <ol class="sub-slides">        <li>          <div class="cd-slider-content">            <div class="content-wrapper">              <h2 id="Slider">Slider #2</h2>            </div>          </div>        </li>        <!-- sub-slides content here -->               </ol> <!-- .sub-slides -->    </li>      <!-- additional slides here -->  </ol> <!-- .cd-slideshow --></div> <!-- .cd-slideshow-wrapper -->
Copier après la connexion

CSS样式

在小屏幕设备中(视口小于1100像素),插件会将所有的幻灯片项目优化为一个列表。对于右子项目的幻灯片,插件中实现了一个可以触摸滑动的slider,优化可以滑动来查看显示子项目。

.cd-slideshow .sub-slides {  width: 100%;  transition: transform 0.3s;}.cd-slideshow > li, .cd-slideshow .sub-slides > li {  position: relative;  z-index: 1;  height: 100vh;  width: 100vw;}.cd-slideshow .sub-slides > li {  float: left;}
Copier après la connexion

带子项目的有序列表项的宽度使用JavaScript来设置。当用户从一个子项目导航到前一个或前一个子项目的时候,插件会沿X轴移动.sub-slides元素。

在大屏幕设备中,.cd-slideshow-wrapper元素的高度被设置为100vh,并设置为overflow:hidden,所以只有在视口中的幻灯片是可见的。然后.cd-slider-content元素被设置宽度、高度和margin使它相对于视口居中。

.visible class类用于添加到当前可见的幻灯片上:它的作用是隐藏.cd-slider-content::after伪元素(该伪元素用于在幻灯片聚焦时改变页面背景色)以及显示幻灯片的内容。

@media only screen and (min-width: 1100px) {  .cd-slideshow-wrapper {    height: 100vh;    overflow: hidden;  }    .cd-slideshow {    transition: transform 0.6s;  }  .cd-slideshow > li, .cd-slideshow .sub-slides > li {    height: auto;    width: auto;  }    .cd-slider-content {    height: 84vh;    width: 90vw;    margin: 2vh 5vw;    border-radius: 10px;    cursor: pointer;  }  .visible .sub-visible .cd-slider-content,   .visible > .cd-slider-content {    /* visible slide */    cursor: auto;  }  .cd-slideshow > li:first-of-type .cd-slider-content {    margin-top: 8vh;  }  .sub-slides > li:first-of-type .cd-slider-content {    margin-left: 5vw;  }  .sub-slides > li .cd-slider-content {    margin-left: 1.25vw;    margin-right: 1.25vw;  }  .cd-slider-content .content-wrapper {    height: 100%;    /* hide the slide content if the slide is not selected/visible */    opacity: 0;    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);    border-radius: inherit;    transition: opacity 0.6s;  }  .cd-slider-content::after {    /* this is used to change the slide background color when the slide is out of focus */    content: '';    position: absolute;    z-index: 3;    top: 0;    left: 0;    height: 100%;    width: 100%;    border-radius: inherit;    background-color: #3a3a3a;    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);    opacity: 1;    visibility: visible;    transition: opacity 0.6s, visibility 0.6s;  }  .visible .cd-slider-content .content-wrapper {    opacity: 1;  }  .visible .cd-slider-content::after {    opacity: 0;    visibility: hidden;  }}
Copier après la connexion

当用户从一个幻灯片页面导航到另一个幻灯片页面时,插件会使用JavaScript沿Y轴移动.cd-slideshow元素。

JavaScript

该演讲稿幻灯片可以通过2中方式来移动:使用键盘方向键和使用导航菜单。

幻灯片的导航菜单功能通过2个主要的函数来实现:updateSlide函数用于从当前幻灯片导航到下一个或前一个幻灯片,updateSubSlide函数用于从当前幻灯片子项导航到前一个或下一个子项目。例如updateSubSlide函数的代码如下:

function updateSubSlide(listItem, string, subSlide) {  var translate,    marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', ''))*6,    windowWidth = window.innerWidth;    windowWidth = ( mq == 'desktop' ) ? windowWidth - marginSlide : windowWidth;    if( listItem.children('.sub-slides').length > 0 ) {    var subSlidesWrapper = listItem.children('.sub-slides'),      visibleSubSlide = subSlidesWrapper.children('.sub-visible');         if( string == 'nav' ) {      /* we have choosen a new slide from the navigation */      var newSubSlide = subSlide;    } else {      var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();    }    var newSubSlidePosition = newSubSlide.index();    translate = parseInt(- newSubSlidePosition*windowWidth);    setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');    visibleSubSlide.removeClass('sub-visible');    newSubSlide.addClass('sub-visible');  }}  function setTransformValue(element, property, value) {  element.style["-webkit-transform"] = property+"("+value+")";  element.style["-moz-transform"] = property+"("+value+")";  element.style["-ms-transform"] = property+"("+value+")";  element.style["-o-transform"] = property+"("+value+")";  element.style["transform"] = property+"("+value+")";  // ...}
Copier après la connexion

来源jQuery之家

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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

Quel est le but du & lt; mètre & gt; élément?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

Quel est le but du & lt; datalist & gt; élément?

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Mar 12, 2025 pm 04:08 PM

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?

See all articles