jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB
| 简要教程 这是一款简单的使用jQuery和CSS3制作类似PPT的演讲稿幻灯片插件。该演讲稿幻灯片插件可以通过键盘上下左右方向键来控制，并且左上角带有菜单按钮，通过菜单项可以选择相应的幻灯片页面。
查看演示 下载插件 使用方法 HTML结构 该演讲稿幻灯片的HTML结构有2个主要的部分：一个 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之家 |