recherche

Maison  >  Article  >  interface Web  >  HTML5的音频和JQUERY的全屏幻灯片

HTML5的音频和JQUERY的全屏幻灯片

WBOY
WBOYoriginal
2016-05-17 09:08:591618parcourir

在今天的教程中，我们将创建一个全屏的照片幻灯片来说明纽约图片系列。 我们将增加对HTML5的音频元素的声音，为了给生活画廊，并尝试重建这个充满活力的城市环境。

在今天的教程中，我们将创建一个全屏的照片幻灯片来说明纽约图片系列。 我们将增加对HTML5的音频元素的声音，为了给生活画廊，并尝试重建这个充满活力的城市环境。

要创建幻灯片和全屏图片显示，我们将使用在拉斯维加斯的jQuery插件，编译以前在文章中的一个插件Codrops共享的很多想法。 嗡嗡声，一个JavaScript音频库将控制音频元素。 你可以找到更多关于这两个插件，我在我的网站上写道： 周杰伦Salvat的网站 。

将五香与一个自定义的使用滚动条的缩略图导航JScrollPane 的开尔文的运气和一些缓解效果所提供的 jQuery 的宽松插件乔治麦克金尼史密斯。

标记

让我们搭建舞台！ 首先，我们创建一个占位符包含图片标题和学分。


  2.    

    New York Gallery

    纽约画廊 H1>


  3.    

    Pictures by Alessandro Artini

    照片href="http://www.flickr.com/">亚历山德罗雅天妮 A> P>


DIV>
复制代码

然后被放置在一个无序列表缩略图。 每个缩略图链接到一个大代表性的图片，并进行图片的标题。 请注意，我们添加一个数据属性，某些环节，调整垂直对齐显示全屏图片，以避免种植的重要组成部分。

两个空的div添加举行的指针和闪光效果的幻灯片更改时。

  1.
    DIV>

  3.   

      •    

      •       
      •         HTML5的音频和JQUERY的全屏幻灯片 HTML5的音频和JQUERY的全屏幻灯片
      •        A>
      •    
        • LI>
      •    

      •       
      •         HTML5的音频和JQUERY的全屏幻灯片 HTML5的音频和JQUERY的全屏幻灯片
      •        A>
      •    
        • LI>
      •    

      •       
      •         HTML5的音频和JQUERY的全屏幻灯片 HTML5的音频和JQUERY的全屏幻灯片
      •        A>
      •    
        • LI>
      •     ... ... ...
      •     UL>
      •    
        DIV>
      DIV>
      复制代码

      最后，我们的地方，暂停和卷管理环节。


      CSS部分

      首先，我们定义标题的一部分，这是一个黑色的背景放置在屏幕底部的风格。 我们使用“RGBA”符号，这使我们能够设置颜色的透明度。 请注意，我们在前面加上旧的浏览器，它由标准的十六进制表示法＃000。

      标题将在谷歌字体收集从超漂亮的字体：

      1. #title { ＃标题{
      2.     background: #000;背景：＃000;
      3.     background: rgba(0, 0, 0, 0.8);背景：RGBA（0，0，0，0.8）;
      4.     bottom: 0px;底部：0px;
      5.     font: 11px Arial, Helvetica, sans-serif;字体：11px宋体，黑体，sans - serif字体;
      6.     padding: 10px 20px;填充：10px 20像素;
      7.     position: fixed;位置：固定;
      8.     right: 0px;右：0px;
      9.     text-align: right;文本对齐：权利;
      10.     width: 100%;宽度：100％;
      11. } }
      12.     #title h1 { ＃标题H1 {
      13.         font: 30px 'Ultra', Arial, serif;字体：30px“超”，宋体，衬线;
      14.         margin: 0;保证金：0;
      15.         padding: 0;填充：0;
      16.     } }
      复制代码

      我们将遵循同样的技术为缩略图。 该列表中的元素是浮动显示单杠的图片。
      1. #thumbnails { ＃缩略图{
      2.     background: #000;背景：＃000;
      3.     background: rgba(0, 0, 0, 0.8);背景：RGBA（0，0，0，0.8）;
      4.     height: 90px;高度：90px;
      5.     left: 0;左：0;
      6.     overflow: hidden;溢出：隐藏;
      7.     position: fixed;位置：固定;
      8.     top: 0;顶部：0;
      9.     width: 100%;宽度：100％;
      10. } }
      11.     #thumbnails ul { ＃缩略图UL {
      12.         margin: 0;保证金：0;
      13.         padding: 0;填充：0;
      14.     } }
      15.     #thumbnails li { ＃缩略图李{
      16.         float: left;浮动：左;
      17.         list-style: none;列表样式：无;
      18.         margin: 5px;保证金：5px;
      19.         padding: 0;填充：0;
      20.     } }
      21.     #thumbnails a { ＃缩略图A {
      22.         outline: none;概要：无;
      23.     } }
      24.     #thumbnails img { ＃缩略图IMG {
      25.         width: 112px;宽度：112px;
      26.     } }
      复制代码

      指针被放在了页面。 这将是动画在幻灯片的开始和移动根据当前显示的幻灯片。

      1. #pointer { ＃指针{
      2.     border: 2px solid #F30;边境：2px的固体＃F30;
      3.     cursor: pointer;光标：指针;
      4.     height: 75px;高度：75px;
      5.     left: -100px;左：- 100px的;
      6.     margin: 3px;保证金：3px;
      7.     position: absolute;位置：绝对;
      8.     width: 112px;宽度：112px;
      9. } }
      复制代码

      闪光效果是纯白色的整个屏幕固定的div。 默认情况下它是隐藏的。 它将会显示和动态淡出。

      1. #flash { ＃闪光灯{
      2.     background: #FFF;背景：＃FFF;
      3.     display: none;显示：无;
      4.     height: 100%;身高：100％;
      5.     position: fixed;位置：固定;
      6.     width: 100%;宽度：100％;
      7. } }
      复制代码

      同样的想法，认为暂停文字。 它是默认隐藏。

      1. #pause { ＃暂停{
      2.     display: none;显示：无;
      3.     font: 100px 'Ultra', arial, serif;字体：100px的“超”，宋体，衬线;
      4.     height: 100%;身高：100％;
      5.     opacity: 0.4;不透明度：0.4;
      6.     position: absolute;位置：绝对;
      7.     text-align: center;文本对齐：中心;
      8.     text-shadow: 0 0 5px #000;文字阴影：0 0 5px＃000;
      9.     width: 100%;宽度：100％;
      10. } }
      11.     #pause a { ＃暂停{
      12.         color: #FFF;颜色：＃FFF;
      13.         height: 100px;高度：100像素;
      14.         left: 50%;左：50％;
      15.         margin: -50px 0 0 -250px;利润率：50像素0 0 - 250像素;
      16.         position: absolute;位置：绝对;
      17.         text-transform: uppercase;文本转换：大写;
      18.         top: 50%;顶部：50％;
      19.         width: 500px;宽度：500px;
      20.     } }
      复制代码

      对于体积联系，我们将使用一些漂亮的图标。 音量按钮显示不同的图标由三个类定义了三个国家。 我们使用CSS精灵技术，以减少PNG加载的文件的数量。

      1. #volume { ＃卷{
      2.     left: 10px;左：10px;
      3.     opacity: 0.8;不透明度：0.8;
      4.     position: absolute;位置：绝对;
      5.     top: 100px; TOP：100px的;
      6. } }
      7.     #volume a { ＃卷{
      8.         background: transparent url(../img/icons.png) no-repeat;背景：透明的url（.. / IMG / icons.png）不重复;
      9.         display: block;显示：块;
      10.         height: 30px;高度：30px;
      11.         text-indent: -9999px;文本缩进：- 9999px;
      12.         width: 30px;宽度：30px;
      13.     } }
      14.     #volume.all a { ＃volume.all A {
      15.         background-position: 0 0;背景位置：0;
      16.     } }
      17.     #volume.some a { ＃volume.some Å {
      18.         background-position: -30px 0;背景位置：30px 0;
      19.     } }
      20.     #volume.none a { ＃volume.none {
      21.         background-position: -60px 0;背景位置：60px 0;
      22.     } }
      复制代码

      最后，我们将自订拉斯维加斯的一些默认的样式调整叠加模式和加载指示器的位置。

      1. .vegas-loading { 。拉斯维加斯加载{
      2.     top: auto;顶部：自动;
      3.     bottom: 40px;底部：40px;
      4.     left: 40px;左：40px;
      5. } }
      6. .vegas-overlay { 。拉斯维加斯叠加{
      7.     background-image: url(../js/vegas/overlays/02.png);背景图像：网址（../js/vegas/overlays/02.png）;
      8. } }
      复制代码

      同时，我们将作一些调整JScrollPane的默认样式，以得到一个不错的滚动装修我们的画廊。

      1. .jspHorizontalBar { 。jspHorizo​​ntalBar {
      2.     height: 5px;高度：5px;
      3. } }
      4.     .jspHorizontalBar .jspTrack { jspHorizo​​ntalBar。jspTrack {
      5.          background: #333;背景：＃333;
      6.     } }
      7.     .jspHorizontalBar .jspDrag { jspHorizo​​ntalBar。jspDrag {
      8.          background: #666;背景：＃666;
      9.          cursor: ew-resize;光标：EW -调整大小;
      10.     } }
      11. #thumbnails:hover .jspHorizontalBar .jspDrag { ＃缩略图。悬停jspHorizo​​ntalBar jspDrag {
      12.     background: #F30;背景：＃F30;
      13. } }
      复制代码

      Javascript部分

      我们到达的主要部分：在JavaScript。 让我们先通过缓存一些元素。 图片数组将容纳所有的幻灯片和他们的标题和垂直对齐。

      1. var pictures = [], VAR图片= []
      2.    $pointer = $( '#pointer' ),指针= $（'＃指针“），
      3.    $thumbnails = $( '#thumbnails' ),美元缩略图= $（'＃缩略图“），
      4.    $title = $( '#title' ),标题= $（“＃标题”），
      5.    $pause = $( '#pause' ),美元暂停= $（'＃停顿'），
      6.    $flash = $( '#flash' ),闪光灯= $（'＃闪光“），
      7.    $volume = $( '#volume' );体积= $（“＃卷”）;
      复制代码

      它的时间来定义使用Buzz我们的画廊的声音。现在所有的现代浏览器支持HTML5的音频元素。支持在本机的方式，而不需要对Flash的声音。不幸的是，不是一个单一的所有支持的音频格式。MP3会是一个不错的选择，但Firefox不支持它。我们有我们的声音转换成多种格式的。最佳的组合是OGG和MP3格式。 要转换音频元素，我们使用免费的在线文件转换器在线转换。

      BUZZ使我们集团的声音，为了方便地控制他们。 这是我们做所有的相机声音。

      如果用户的浏览器不支持HTML5的音频元素，巴斯适当的降低。 在这种情况下，我们将简单地隐藏音量按钮。

      交通播放声音，只要它是加载循环。

      1. buzz.defaults.formats = [ 'ogg', 'mp3' ]; var trafficSound = new buzz.sound( 'sounds/traffic' ), clickSound = new buzz.sound( 'sounds/click' ), focusSound = new buzz.sound( 'sounds/focus' ), rewindSound = new buzz.sound( 'sounds/rewind' ), cameraSounds = new buzz.group( clickSound, focusSound, rewindSound ); if ( !buzz.isSupported() ) { $volume.hide(); } buzz.defaults.formats = ['OGG“，”MP3“]; VAR trafficSound =新buzz.sound（”声音/交通'），clickSound =新buzz.sound（“声音/点击”），focusSound =新的嗡嗡声。声音（声音/聚焦“），rewindSound =新buzz.sound（声音/倒带），cameraSounds =新buzz.group（clickSound，focusSound，rewindSound）;如果（！buzz.isSupported（））{$卷。 （）;}
      复制代码
      1. trafficSound.loop().play().fadeIn( 5000 );发挥（）。trafficSound.loop（）fadeIn（5000）;
      复制代码

      现在，让我们的工作对我们的缩略图。 我们必须调整的总宽度的缩略图栏。 如果没有这一步，缩略图会显示在多个行。

      1. $thumbnails.find( 'ul' ).width( function() {美元thumbnails.find（“UL”）。宽度（函数（）{
      2.     var totalWidth = 0; VAR totalWidth = 0;
      3.     $( this ).find( 'li' ).each( function() { $（本）（“礼”）。（函数（）{
      4.         totalWidth += $( this ).outerWidth( true ); totalWidth + = $（本）outerWidth（TRUE）;
      5.     }); }）;
      6.     return totalWidth;返回totalWidth;
      7. }); }）;
      复制代码

      我们现在申请的JScrollPane的缩略图容器。JScrollPane中提供了一个简单的工作方式与它的API。我们，为了呈现一个适当的调整窗口的大小时，滚动使用。这个API将在进一步的有用。

      1. $thumbnails.jScrollPane(); $ thumbnails.jScrollPane（）;

      3. var jScrollPaneApi = $thumbnails.data( 'jsp' ); VAR jScrollPaneApi = $ thumbnails.data（“JSP”）;

      5. $( window ).bind( 'resize', function() { $（窗口）。绑定（“调整大小”，函数（）{
      6.     jScrollPaneApi.reinitialise(); jScrollPaneApi.reinitialise（）;
      7. }); }）;
      复制代码

      现在，拉斯维加斯插件需要设置。我们将填补从缩略图列表中抓住一些资料图片数组，并把它传递到拉斯维加斯以开始播放幻灯片。4秒的延迟，应用之间的幻灯片。

      1. $thumbnails.find( 'a' ).each( function() {美元thumbnails.find（'A'）（函数（）{
      2.     pictures.push({ pictures.push（{
      3.         src: $( this ).attr( 'href' ), SRC：$（本）ATTR（'href'的），
      4.         title: $( this ).find( 'img' ).attr( 'title' ),标题：$（本）（“IMG”）ATTR（“标题”），。
      5.         valign: $( this ).find( 'img' ).data( 'valign' ) VALIGN：$（本）（“IMG”）的数据（“VALIGN”）。
      6.     }); }）;
      7. }) }）

      9. $.vegas( 'slideshow', {美元。拉斯维加斯（“幻灯片”，{
      10.     backgrounds: pictures,背景：图片，
      11.     delay: 4000延迟：4000
      12. })( 'overlay' ); }）（“覆盖”）;
      复制代码

      拉斯维加斯触发一堆的事件。我们现在需要的是一个onload事件触发时加载和显示幻灯片。随着加载的图像的src属性，我们将得到目前活跃的缩略图的数量。此外，播放声音。

      1. $( 'body' ).bind( 'vegasload', function( e, img ) { $（“体”）绑定（“vegasload”，功能（E，IMG）{
      2.    var src = $( img ).attr( 'src' ), VAR SRC = $（IMG）。ATTR（'src'中），
      3.        idx = $( 'a[href="' + src + '"]' ).parent( 'li' ).index(); IDX = $（'A [HREF =“”+ SRC +']'）父（“礼”）指数（）。
      复制代码
      1. focusSound.play(); focusSound.play（）;

      3.     // ... / / ...
      4. }); }）;
      复制代码

      标题被修改，以持有的图片标题和显示是一个很好的fade-out/fade-in效果。

      1. $title.fadeOut( function() { title.fadeOut（函数（）{
      2.        $( this ).find( 'h1' ).text( pictures[ idx ].title ); 。$（本）（“H1”）的文本（图片[idx的称号。）;
      3.        $( this ).fadeIn(); $（本）fadeIn（）;
      4.    }); }）;
      复制代码

      闪光灯闪光... ...

      1. $flash.show().fadeOut( 1000 );美元flash.show（）淡出（1000）。
      复制代码

      指针移到当前的缩略图。 JScrollPane的空气污染指数是用来自动滚动栏指针是关闭屏幕，但如果用户将鼠标悬停在酒吧。

      1. var pointerPosition = $thumbnails.find( 'li' ).eq( idx ).position().left; VAR pointerPosition美元thumbnails.find（“礼”）EQ（IDX）的位置（）离开了。。;

      3.    $pointer.animate({ pointer.animate（，
      4.        left: pointerPosition左：pointerPosition
      5.    }, 500, 'easeInOutBack' ); }，500，'easeInOutBack'）;

      7.    if ( ( pointerPosition > $thumbnails.width() （（pointerPosition> $ thumbnails.width（）
      8.        || pointerPosition | | pointerPosition
      9.        && !$thumbnails.is( ':hover' ) ) { ！＆＆$ thumbnails.is（'：悬停'））{
      10.            jScrollPaneApi.scrollToX( pointerPosition, true ); jScrollPaneApi.scrollToX（pointerPosition，TRUE）;
      11.    } }

      13.    $pointer.click( function() { $ pointer.click（函数（）{
      14.        $thumbnails.find( 'a' ).eq( idx ).click()美元thumbnails.find（'A'）。EQ（IDX）。单击（）
      15.    }); }）;
      复制代码

      让我们看看我们做我们的音量按钮。我们的想法是静音或取消静音按钮被点击的一些声音。 我们改变按钮的类，并设置静音或播放相应的声音。

      1. $volume.click( function() { $ volume.click（函数（）{
      2.     if ( $( this ).hasClass( 'all' ) ) { （$（本）。hasClass（“全部”））{
      3.         cameraSounds.unmute(); cameraSounds.unmute（）;
      4.         trafficSound.mute(); trafficSound.mute（）;

      6.         $( this ).removeClass( 'all' ).addClass( 'some' ); $（本）removeClass addClass（“一些”）（“全部”）。
      7.     } else if ( $( this ).hasClass( 'some' ) ) {代码} else if（$（本）。hasClass（“一些”））{
      8.         cameraSounds.mute(); cameraSounds.mute（）;
      9.         trafficSound.mute(); trafficSound.mute（）;

      11.         $( this ).removeClass( 'some' ).addClass( 'none' ); $（本）removeClass addClass（“一些”）（“无”）。
      12.     } else { }否则{
      13.         cameraSounds.unmute(); cameraSounds.unmute（）;
      14.         trafficSound.unmute(); trafficSound.unmute（）;

      16.         $( this ).removeClass( 'none' ).addClass( 'all' ); $（本）removeClass addClass（“全部”）（“无”）。
      17.     } }
      18.     return false;返回false;
      19. }); }）;
      复制代码

      几乎是我们的画廊。现在，我们希望，点击缩略图显示一个新的幻灯片，并暂停幻灯片。其Cursor设置为目前点击缩略图。这样的幻灯片将在合适的位置重新启动。所有的页面元素是隐藏的，我们显示了一个“暂停”的消息。

      另一种播放声音。

      1. $thumbnails.find( 'a' ).click( function() { $pause.show(); $pointer.hide(); $volume.animate( { top: '20px' }); $thumbnails.animate( { top: '-90px' }); $title.animate( { bottom: '-90px' }); var idx = $( this ).parent( 'li' ).index(); $.vegas( 'slideshow', { step: idx } )( 'pause' ); rewindSound.play(); return false; });美元thumbnails.find（'A'）（函数（）{$ pause.show（）; $ pointer.hide（）; volume.animate（{：'20px'}）; thumbnails.animate（{顶部：'- 90px'}）;美元title.animate（{底部：。'- 90px'}）; VAR IDX = $（）父（“礼”）指数（）; $拉斯维加斯（“幻灯片” {步骤：IDX}）（“暂停”）; rewindSound.play（）;返回false;}）;
      复制代码

      再次点击“暂停”一词重新启动幻灯片，缩略图和标题显示。

      1. $pause.click( function() { $ pause.click（函数（）{
      2.     $pause.hide();美元pause.hide（）;
      3.     $pointer.show();美元pointer.show（）;

      5.     $volume.animate( { top:'100px' }); volume.animate（{顶部：'100px'}）;
      6.     $title.animate( { bottom:'0px' }); title.animate（{底部：0 PX'}）;
      7.     $thumbnails.animate( { top:'0px' }); thumbnails.animate（{顶部：0 PX'}）;

      9.     $.vegas( 'slideshow' );拉斯维加斯（“幻灯片”）。

      11.     clickSound.play(); clickSound.play（）;

      13.     return false;返回false;
      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：0基础接触html5之jquery（一）简介Article suivant：canvas 像素级碰撞

      Articles Liés

      Voir plus