jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose
简要教程
这是一款简单的使用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 -->
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;}
带子项目的有序列表项的宽度使用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; }}
当用户从一个幻灯片页面导航到另一个幻灯片页面时,插件会使用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+")"; // ...}
来源jQuery之家

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
