精华内容
下载资源
问答
  • html设置幻灯片铺满全屏View demo 查看演示Download Source 下载源(Please note that the ZIP file does not contain any video files due to their size.) (请注意,由于文件大小,ZIP文件不...
    html设置幻灯片铺满全屏

    html设置幻灯片铺满全屏

    Fullscreen Video Slideshow with BigVideo.js

    (Please note that the ZIP file does not contain any video files due to their size.)

    (请注意,由于文件大小,ZIP文件不包含任何视频文件。)

    BigVideo.js is a jQuery plugin that makes it easy to create fit-to-fill background video on a web page. It can play silent ambient background video (or series of videos), or used as a player to show video playlist.

    BigVideo.js是一个jQuery插件,可轻松在网页上创建适合填充的背景视频。 它可以播放无声的环境背景视频(或一系列视频),或用作播放器以显示视频播放列表。

    In this tutorial, we’ll be creating a page that shows a series of video screens, showcasing the free HD stock video footage and animated backgrounds available on Beachfront B-Roll.

    在本教程中,我们将创建一个页面,其中显示了一系列视频屏幕,展示了Beachfront B-Roll上提供的免费高清股票视频和动画背景。

    Before we get started, give some thought as to whether using this technique at all is appropriate for your project. Background video is bandwidth heavy and can be a big drag on the user’s browser performance. If your site is already video-heavy or incorporating big video is essential to the design and purpose of your site, then using this technique may be a great choice. However, if you can accomplish the same goal with using cinemagraphs for example, maybe that is a better choice. This tutorial is can be helpful to you in either case, as we cover using big background images as well.

    在开始之前,请先考虑一下是否完全适合您的项目。 后台视频占用大量带宽,可能会严重拖累用户的浏览器性能。 如果您的站点已经是大量视频,或者合并大型视频对于站点的设计和目的至关重要,那么使用此技术可能是一个不错的选择。 但是,例如,如果您可以使用电影胶片来实现相同的目标,那也许是一个更好的选择。 无论哪种情况,本教程都会对您有所帮助,因为我们还将介绍使用大背景图像。

    The first thing you’ll need to do is get video content. In this case, we went to Beachfront B-Roll and downloaded a few of their free videos. Some of them were quite large in file size, so I used Quicktime Pro to trim them to about 10 seconds or so in length. For each of the videos, we will also need to create a poster image image of the first frame of the video. I used Photoshop to save a 960×540 jpeg for each image. I used a trick of applying a .5 pixel blur and a quality setting of 50 to get a smaller file size (afterall, these are background images, so having a little blurriness on them is not a bad thing).

    您需要做的第一件事就是获取视频内容。 在这种情况下,我们去了Beachfront B-Roll,并下载了他们的一些免费视频。 其中一些文件的大小非常大,因此我使用Quicktime Pro将它们的长度调整为大约10秒左右。 对于每个视频,我们还需要创建视频第一帧的海报图像。 我使用Photoshop为每个图像保存960×540 jpeg。 我使用了一个技巧,应用0.5像素模糊和50的质量设置来获得较小的文件大小(毕竟,这些是背景图像,因此在它们上稍加模糊不是一件坏事)。

    标记 (The Markup)

    First, let’s do the markup for the page:

    首先,让我们为页面做标记:

    We have a header on the center of the screen. Then we have a wrapper div that contains all the different video screens. Then, there is a button we will use to navigate between the screens.

    我们在屏幕中央有一个标题。 然后我们有一个包装器div,其中包含所有不同的视频屏幕。 然后,有一个按钮,我们将使用它在屏幕之间进行导航。

    
    <header>
        <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1>
        <p>The videos in this demo are from <a href="http://beachfrontprod.blogspot.com" target="_blank">Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p>
        <p><small>A demo for</small> <a href="http://dfcb.github.com/BigVideo.js/" target="_blank">BigVideo.js</a> <small>by <a href="http://twitter.com/johnpolacek" target="_blank" rel="author">@johnpolacek</a></small></p>
    </header>
    
    <div class="wrapper">
        <div class="screen" id="screen-1" data-video="vid/bird.mp4">
            <img src="img/bird.jpg" class="big-image" />
            <h1 class="video-title">#1 Bird</h1>
        </div>
        <div class="screen" id="screen-2" data-video="vid/satellite.mp4">
            <img src="img/satellite.jpg" class="big-image" />
            <h1 class="video-title">#2 Satellite</h1>
        </div>
        <div class="screen" id="screen-3" data-video="vid/camera.mp4">
            <img src="img/camera.jpg" class="big-image" />
            <h1 class="video-title">#3 Camera</h1>
        </div>
        <div class="screen" id="screen-4" data-video="vid/spider.mp4">
            <img src="img/spider.jpg" class="big-image" />
            <h1 class="video-title">#4 Spider</h1>
        </div>
        <div class="screen" id="screen-5" data-video="vid/dandelion.mp4">
            <img src="img/dandelion.jpg" class="big-image" />
            <h1 class="video-title">#5 Dandelion</h1>
        </div>
    </div>
    
    <nav id="next-btn">
        <a href="#" class="next-icon"></a>
    </nav>
    
    

    CSS(The CSS)

    Before we get into the video, we need to style the page.

    在观看视频之前,我们需要对页面进行样式设置。

    Since navigation will be handled by a single big next button, we set the body overflow to hidden. While we’re at it, we’ll make all text on the page white.

    由于导航将由单个大的next按钮处理,因此我们将主体溢出设置为隐藏。 在此过程中,我们会将页面上的所有文本设为白色。

    
    html, body {
        margin: 0;
        padding: 0;
        color: #fff;
        overflow: hidden;
        font-family: 'Open Sans Condensed', Arial, sans-serif;
        font-weight: 300;
        font-size: 1em;
    }
    
    

    Next, for the wrapper, we know we have five content screens, so we set the width to 500% (100% per screen) and the height to 100%. We are going to navigate the page by animating the wrapper’s horizontal position, so it will use absolute positioning. We’ll use a z-index of zero to keep the wrapper content in the background.

    接下来,对于包装器,我们知道我们有五个内容屏幕,因此我们将宽度设置为500%(每个屏幕100%),将高度设置为100%。 我们将通过设置包装器的水平位置动画来导航页面,因此它将使用绝对定位。 我们将使用零的z-index来将包装内容保留在后台。

    Note the data-video attribute. This is where our script will grab the url for the video for each screen.

    注意data-video属性。 这是我们的脚本将在每个屏幕上获取视频网址的地方。

    
    .wrapper {
        position: absolute;
        width: 500%;
        height: 100%;
        z-index: 0;
    }
    
    

    We’ll position the header in the center of the page and make. Also, give it a high z-index so it stays on top of our background content.

    我们将标题放置在页面的中心并制作。 另外,为其提供较高的z-index,使其始终位于我们的背景内容之列。

    
    header {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999;
        color: #fff;
        background: rgba(0,0,0,0.5);
        padding: 60px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        margin: -200px 0 0 -200px;
        text-align: center;
    }
    
    
    

    We want each screen to fill the height and width of the screen, so we set the height to 100%, and the width to 100% divided by the number of screens, in this case this results in 20%. Let’s set them to float left and make the positioning relative so we can absolutely position content inside the screens. We center the position of the image inside the screen div, so we keep the overflow hidden.

    我们希望每个屏幕都填满屏幕的高度和宽度,因此我们将高度设置为100%,将宽度设置为100%除以屏幕数,在这种情况下,结果为20%。 让我们将它们设置为向左浮动并相对定位,这样我们就可以将内容绝对定位在屏幕内。 我们将图像的位置置于屏幕div的中心,因此我们将溢出隐藏起来。

    
    .screen {
        position: relative;
        height: 100%; 
        width: 20%; /*  NOTE:numVideos/100%  */
        float: left;
        overflow: hidden;
    }
    
    

    Inside the screen divs, we have a large image of the first frame of the video and a video title. For the image, we use min-width, min-height to make sure the size of the image is never smaller than the size of the .screen container div (which is always the size of the browser window) and set height and width to auto so the image’s aspect ratio is maintained.

    在屏幕div内,我们有视频第一帧的大图像和视频标题。 对于图片,我们使用min-width,min-height来确保图片的大小永远不会小于.screen容器div的大小(始终是浏览器窗口的大小),并将height和width设置为自动,以保持图像的纵横比。

    
    .big-image {
        min-width: 100%;
        min-height: 100%; 
        height: auto;
        width: auto; 
    }
    
    

    Let’s put the video titles in the bottom left, make the font size really big and have them be 50% transparent.

    让我们将视频标题放在左下角,使字体真正变大并使它们具有50%的透明度。

    
    .video-title {
        position: absolute;
        bottom: 5%;
        left: 5%;
        opacity: .5;
        margin: 0;
        padding: 0;
        line-height: .65;
        font-size: 4em;
        text-transform: uppercase;
    }
    
    

    Next up, the arrow button. I’ve made a pure CSS arrow button using a technique of putting a box with a border top and left, then rotating that box 45 degrees and putting it inside a div with a large border-radius turning it into a circle. (Note: We will make the rotation work by applying an IE filter for rotating 45 degrees from Boog Design’s excellent Matrix Calculator. See the head of the HTML for the conditional comment.)

    接下来,箭头按钮。 我已经制作了一个纯CSS箭头按钮,使用的技术是将一个带有顶部和左侧边框的框放在该框内,然后将其旋转45度,然后将其放入具有大边框半径的div内,使其变成一个圆形。 (注意:我们将通过应用Boog Design出色的Matrix Calculator中的IE过滤器将45度旋转来使旋转工作。有关条件注释,请参见HTML的头部。)

    
    nav {
        position:absolute; 
        right: 5%; 
        top: 45%; 
        padding: 20px; 
        background: #000; 
        border-radius: 40px; 
        opacity: .4; 
        cursor: pointer;}
        nav: hover {
        opacity: .6;
    }
    
    .next-icon {
        display: block;
        border-top: solid 2px #fff; 
        border-right: solid 2px #fff; 
        width: 20px; 
        height: 20px;
        position: relative;
        left: -5px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        color: #fff;
        text-decoration: none;
    }
    
    

    JavaScript(The JavaScript)

    Ok, here’s where we make stuff happen. First, link to all the scripts at the bottom of the page, before the closing body tag. Download the BigVideo.js Github Repo. In addition to BigVideo.js and its dependencies, we will be using jQuery Transit for animations.

    好的,这是我们使事情成真的地方。 首先,链接到页面底部所有结束脚本之前的脚本。 下载BigVideo.js Github Repo 。 除了BigVideo.js及其依赖项之外,我们还将使用jQuery Transit进行动画处理。

    
    <!-- BigVideo Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"></script>')</script>
    <script src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script src="js/jquery.imagesloaded.min.js"></script>
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    
    <!-- BigVideo -->
    <script src="js/bigvideo.js"></script>
    
    <!-- Tutorial Demo -->
    <script src="js/jquery.transit.min.js"></script>
    
    

    Before we get to the video, let’s set up navigation. We will need some vars to help manage navigation.

    在观看视频之前,让我们设置导航。 我们将需要一些变量来帮助管理导航。

    
    $(function() {
        var screenIndex = 1,
        numScreens = $('.screen').length,
        isTransitioning = false,
        transitionDur = 1000;
    }
    
    

    Let’s go over what these vars do.

    让我们来看看这些变量的作用。

    • screenIndex – keeps track of what screen we are looking at

      screenIndex –跟踪我们正在查看的屏幕
    • numScreens – the number of screens (in our case 5)

      numScreens –屏幕数(在我们的示例中为5)
    • isTransition – boolean to prevent extra clicking interfering with the navigation

      isTransition –布尔值,用于防止额外的点击干扰导航
    • transitionDur – how fast the animation scrolls

      transitionDur –动画滚动的速度

    Now, add a next button click event and callback to do navigation.

    现在,添加一个next button click事件和回调以进行导航。

    
    $('#next-btn').on('click', function(e) {
        e.preventDefault();
        if (!isTransitioning) {
            next();
        }
    });
    
    function next() {
        isTransitioning = true;
        
        // update video index
        if (screenIndex === numScreens) {
            screenIndex = 1;
        } else {
            screenIndex++;
        }
        
        $('.wrapper').transit(
            {'left':'-'+(100*(screenIndex-1))+'%'},
            transitionDur,
            onTransitionComplete);
    }
    
    function onTransitionComplete() {
        isTransitioning = false;
    }
    
    

    Now, that our navigation is working, time to set up the video. When creating a video heavy site, it is important to consider mobile devices. Typically they do not support autoplay, meaning ambient background video will not work. There are tricks to get around this, but we should also consider that it is likely that the user is on a lower bandwidth connection. One thing to consider would be to provide non-video content to these users. In this demo, we will demonstrate how to do that using Modernizr, which you should link to in the document head.

    现在,我们的导航正常了,是时候设置视频了。 创建重载视频的站点时,考虑移动设备很重要。 通常,它们不支持自动播放,这意味着环境背景视频将不起作用。 有一些技巧可以解决此问题,但我们还应考虑到用户可能使用较低带宽的连接。 要考虑的一件事是向这些用户提供非视频内容。 在此演示中,我们将演示如何使用Modernizr做到这一点,您应该在文档头部将其链接到。

    First, add a var for BigVideo (BV) and an isTouch boolean to the top of our script, which gets set by Modernizr’s touch feature detection.

    首先,在脚本的顶部添加一个BigVideo(BV)变量和一个isTouch布尔值,这由Modernizr的触摸功能检测设置。

    
    var screenIndex = 1,
        numScreens = $('.screen').length,
        isTransitioning = false,
        transitionDur = 1000,
        BV,
        isTouch = Modernizr.touch;
       
    

    Next, initialize BigVideo for non-touch devices. Create a showVideo() function where we will grab the video filepath from the data-video attribute for the current screen being viewed. Add a showVideo() call to the onTransitionComplete callback function. Also, when the video is loaded and ready to play, we need to fade the framegrab image out. To do that, we use the Video.js api to add a ‘loadeddata’ event listener to the BigVideo player. We attach a callback function to that event which makes the image of the current screen fade out so the video is displayed.

    接下来,为非触摸设备初始化BigVideo。 创建一个showVideo()函数,在该函数中,我们将从正在查看的当前屏幕的data-video属性中获取视频文件路径。 将一个showVideo()调用添加到onTransitionComplete回调函数。 同样,在加载视频并准备播放时,我们需要淡出framegrab图像。 为此,我们使用Video.js api向BigVideo播放器添加“ loadeddata”事件监听器。 我们为该事件附加了回调函数,该函数使当前屏幕的图像淡出,从而显示视频。

    
    var screenIndex = 1,
        numScreens = $('.screen').length,
        isTransitioning = false,
        transitionDur = 1000,
        BV,
        isTouch = Modernizr.touch;
    
    // Next button click goes to next div
    $('#next-btn').on('click', function(e) {
        e.preventDefault();
        if (!isTransitioning) {
            next();
        }
    });
    
    if (!isTouch) {
        // initialize BigVideo
        BV = new $.BigVideo({forceAutoplay:isTouch});
        BV.init();
        showVideo();
        
        BV.getPlayer().addEvent('loadeddata', function() {
            onVideoLoaded();
        });
    
        // adjust image positioning so it lines up with video
        $bigImage
            .css('position','relative')
            .imagesLoaded(adjustImagePositioning);
        // and on window resize
        $(window).on('resize', adjustImagePositioning);
    }
    
    // Next button click goes to next div
    $('#next-btn').on('click', function(e) {
        e.preventDefault();
        if (!isTransitioning) {
            next();
        }
    });
    
    function showVideo() {
        BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
    }
    
    function next() {
        isTransitioning = true;
        
        // update video index, reset image opacity if starting over
        if (screenIndex === numScreens) {
            $bigImage.css('opacity',1);
            screenIndex = 1;
        } else {
            screenIndex++;
        }
        
        if (!isTouch) {
            $('#big-video-wrap').transit({'left':'-100%'},transitionDur)
        }
            
        $('.wrapper').transit(
            {'left':'-'+(100*(screenIndex-1))+'%'},
            transitionDur,
            onTransitionComplete);
    }
    
    function onVideoLoaded() {
        $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},200)
    }
    
    function onTransitionComplete() {
        isTransitioning = false;
        if (!isTouch) {
            $('#big-video-wrap')
                .css('left',0);
            showVideo();
        }
    }
    
    

    整理(Tidying up)

    You may notice that the big image and the big video don’t line up during the fade animation, resulting in a bothersome jump in position.This is because the video is centered inside the screen. To fix the problem, we need also need to center our images. To do that, we create a function that adjusts the positioning of the images.

    您可能会注意到在淡入淡出动画期间大图像和大视频没有对齐,这会导致位置跳动,这是因为视频居中于屏幕内部。 要解决该问题,我们还需要将图像居中。 为此,我们创建了一个调整图像位置的功能。

    
    function adjustImagePositioning() {
        $bigImage.each(function(){
            var $img = $(this),
                img = new Image();
    
            img.src = $img.attr('src');
    
            var windowWidth = $window.width(),
                windowHeight = $window.height(),
                r_w = windowHeight / windowWidth,
                i_w = img.width,
                i_h = img.height,
                r_i = i_h / i_w,
                new_w, new_h, new_left, new_top;
    
            if( r_w > r_i ) {
                new_h   = windowHeight;
                new_w   = windowHeight / r_i;
            }
            else {
                new_h   = windowWidth * r_i;
                new_w   = windowWidth;
            }
    
            $img.css({
                width   : new_w,
                height  : new_h,
                left    : ( windowWidth - new_w ) / 2,
                top     : ( windowHeight - new_h ) / 2
            })
    
        });
    
    }
    
    

    Call the function on document ready and attach it to a window resize event.

    在文档准备就绪时调用该函数,并将其附加到窗口调整大小事件。

    
    $bigImage
        .css('position','relative')
        .imagesLoaded(adjustImagePositioning);
    // and on window resize
    $(window).on('resize', adjustImagePositioning);
    
    

    Now the images and videos should be aligned, resulting in a clean transition between the poster image and the video.

    现在,图像和视频应对齐,从而在海报图像和视频之间实现清晰的过渡。

    Please note that the ZIP file does not contain any video files due to their size.

    请注意,ZIP文件由于大小而不含任何视频文件。

    翻译自: https://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js/

    html设置幻灯片铺满全屏

    展开全文
  • html设置幻灯片铺满全屏View demo 查看演示Download Source 下载源In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add ...
    html设置幻灯片铺满全屏

    html设置幻灯片铺满全屏

    fullscreenSlideshowHtml5

    In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

    在今天的教程中,我们将创建一个全屏照片幻灯片,以说明纽约的图片系列。 我们将使用HTML5音频元素添加声音,以使画廊栩栩如生,并尝试重新创建这座充满活力的城市的环境。

    To create the slideshow and the fullscreen picture display, we’ll use the Vegas jQuery plugin that compiles many ideas previously shared in Codrops articles in one plugin. The audio elements will be controlled with Buzz, a JavaScript audio library. You can find out more about these two plugins that I wrote on my website: Jay Salvat’s website.

    为了创建幻灯片和全屏图片显示,我们将使用Vegas jQuery插件,该插件将以前在Codrops文章中共享的许多想法汇总在一个插件中。 音频元素将通过JavaScript音频库Buzz进行控制。 您可以在我的网站上找到有关这两个插件的更多信息: Jay Salvat的网站

    The thumbnails navigation will be spiced up with a custom scrollbar using jScrollPane by Kelvin Luck and some easing effects provided by the jQuery easing plugin by George McGinley Smith.

    缩略图导航将使用Kelvin Luck的jScrollPane和自定义滚动条进行增补,以及George McGinley SmithjQuery缓动插件提供的缓动效果。

    The New York photography is by Alessandro Artini, check out his photos on his Flickr photostream.

    纽约摄影是亚历山德罗•阿蒂尼( Alessandro Artini)拍摄的,在他的Flickr照片流上可以查看他的照片。

    标记 (The Markup)

    Let’s set the stage! First we create a placeholder to contain the picture title and credits.

    让我们做好准备! 首先,我们创建一个占位符以包含图片标题和字幕。

    <div id="title">
        <h1>New York Gallery</h1>
        <p>Pictures by <a href="http://www.flickr.com/">Alessandro Artini</a></p>
    </div>
    

    Then the thumbnails are placed in an unordered list. Each thumbnail is linked to a big representation of the picture and carry the title of the picture. Note that we add a data attribute to some links to adjust the vertical alignment of the displayed fullscreen picture to avoid cropping an important part.

    然后将缩略图放置在无序列表中。 每个缩略图都链接到图片的较大表示,并带有图片标题。 请注意,我们在某些链接中添加了data属性,以调整显示的全屏图片的垂直对齐,从而避免裁剪重要部分。

    Two empty divs are added to hold the pointer and the flash effect when the slides change.

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

    <div id="flash"></div>
    <div id="thumbnails">
      <ul>
        <li>
          <a href="01.jpg">
            <img src="01b.jpg" title="New York moving" data-valign="top">
          </a>
        </li>
        <li>
          <a href="02.jpg">
            <img src="02b.jpg" title="New York traffic" data-valign="bottom">
          </a>
        </li>
        <li>
          <a href="03.jpg">
            <img src="03b.jpg" title="Street dancers">
          </a>
        </li>
        ...
        </ul>
        <div id="pointer"></div>
    </div>
    

    Finally, we place the links for the pause and volume management.

    最后,我们放置用于暂停和音量管理的链接。

    <div id="pause"><a href="#">Paused</a></div>
    
    <div id="volume"><a href="#">Sounds</a></div>
    

    CSS (The CSS)

    First, we’ll define the style of the title part which is placed at the bottom of the screen with a black background. We use the “rgba” notation which allow us to set the opacity of the color. Note that we prepend it by the standard hex notation #000 for older browsers.

    首先,我们将定义标题部分的样式,该标题部分放置在屏幕底部并带有黑色背景。 我们使用“ rgba”符号来设置颜色的不透明度。 请注意,对于较旧的浏览器,我们在其前面添加了标准十六进制表示法#000。

    The heading will be in the nice Ultra font from the Google fonts collection:

    标题将采用Google字体集合中漂亮的Ultra字体:

    #title {
        background: #000;
        background: rgba(0, 0, 0, 0.8);
        bottom: 0px;
        font: 11px Arial, Helvetica, sans-serif;
        padding: 10px 20px;
        position: fixed;
        right: 0px;
        text-align: right;
        width: 100%;
    }
        #title h1 {
            font: 30px 'Ultra', Arial, serif;
            margin: 0;
            padding: 0;
        }
    

    We’ll follow the same technique for the thumbnails. The elements of the list are floated to display the pictures as an horizontal bar.

    我们将对缩略图采用相同的技术。 列表中的元素将浮动以将图片显示为水平条。

    #thumbnails {
        background: #000;
        background: rgba(0, 0, 0, 0.8);
        height: 90px;
        left: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
    }
        #thumbnails ul {
            margin: 0;
            padding: 0;
        }
        #thumbnails li {
            float: left;
            list-style: none;
            margin: 5px;
            padding: 0;
        }
        #thumbnails a {
            outline: none;
        }
        #thumbnails img {
            width: 112px;
        }
    

    The pointer is placed out of the page. It will be animated at the beginning of the slideshow and moved under the currently displayed slide.

    指针被放置在页面之外。 它将在幻灯片开始时进行动画处理,并在当前显示的幻灯片下移动。

    #pointer {
        border: 2px solid #F30;
        cursor: pointer;
        height: 75px;
        left: -100px;
        margin: 3px;
        position: absolute;
        width: 112px;
    }
    

    The flash effect is done with a pure white div fixed over the whole screen. By default it is hidden. It will be shown and faded out dynamically.

    闪光效果是通过将纯白色div固定在整个屏幕上来完成的。 默认情况下它是隐藏的。 它会被显示并动态消失。

    #flash {
        background: #FFF;
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    

    The same idea holds for the pause text. It is hidden by default.

    暂停文本也是如此。 默认情况下它是隐藏的。

    #pause {
        display: none;
        font: 100px 'Ultra', arial, serif;
        height: 100%;
        opacity: 0.4;
        position: absolute;
        text-align: center;
        text-shadow: 0 0 5px #000;
        width: 100%;
    }
        #pause a {
            color: #FFF;
            height: 100px;
            left: 50%;
            margin: -50px 0 0 -250px;
            position: absolute;
            text-transform: uppercase;
            top: 50%;
            width: 500px;
        }
    

    For the volume links we’ll use some nice icons. The volume button has three states defined by three classes showing different icons. We use the CSS sprites technique to reduce the number of png files loaded. Read more about the CSS image replacement and CSS sprites technique on Css-tricks.

    对于音量链接,我们将使用一些漂亮的图标。 音量按钮具有三个状态,由三个类别定义,分别显示不同的图标。 我们使用CSS Sprites技术减少加载的png文件数量。 阅读有关Css-tricks上的CSS图像替换CSS Sprites技术的更多信息。

    #volume {
        left: 10px;
        opacity: 0.8;
        position: absolute;
        top: 100px;
    }
        #volume a {
        	background: transparent url(../img/icons.png) no-repeat;
        	display: block;
        	height: 30px;
        	text-indent: -9999px;
        	width: 30px;
        }
        #volume.all a {
            background-position: 0 0;
        }
        #volume.some a {
            background-position: -30px 0;
        }
        #volume.none a {
            background-position: -60px 0;
        }
    

    Finally, we’ll customize some Vegas default styles to adjust the overlay pattern and the position of the loading indicator.

    最后,我们将自定义一些Vegas默认样式,以调整覆盖图案和加载指示器的位置。

    .vegas-loading {
        top: auto;
        bottom: 40px;
        left: 40px;
    }
    .vegas-overlay {
        background-image: url(../js/vegas/overlays/02.png);
    }
    

    And we’ll also make some adjustments to the jScrollPane default styles in order to get a nice scrollbar fitting our gallery.

    而且,我们还将对jScrollPane的默认样式进行一些调整,以获得适合我们画廊的漂亮滚动条。

    .jspHorizontalBar {
        height: 5px;
    }
        .jspHorizontalBar .jspTrack {
             background: #333;
        }
        .jspHorizontalBar .jspDrag {
             background: #666;
             cursor: ew-resize;
        }
    #thumbnails:hover .jspHorizontalBar .jspDrag {
        background: #F30;
    }
    

    JavaScript (The JavaScript)

    We are reaching the main part: the JavaScript. Let’s start by caching some elements. The picture array will hold all the slides and their title and vertical alignment.

    我们正在达到主要部分:JavaScript。 让我们从缓存一些元素开始。 图片数组将保存所有幻灯片及其标题和垂直对齐。

    var pictures = [],
        $pointer = $( '#pointer' ),
        $thumbnails = $( '#thumbnails' ),
        $title = $( '#title' ),
        $pause = $( '#pause' ),
        $flash = $( '#flash' ),
        $volume = $( '#volume' );
    

    It’s time to define the sounds of our gallery with Buzz. The HTML5 audio element is now supported by all modern browsers. Sounds are supported in a native way without the need for Flash. Unfortunately, there is not a single audio format supported by all of them. MP3 would have been a good choice, but Firefox doesn’t support it. We have to convert our sounds to several formats. The best combination is OGG and MP3 formats. To convert our audio elements we used the free online file converter Online Convert.

    现在该用Buzz定义我们画廊的声音了。 所有现代浏览器现在都支持HTML5音频元素。 声音的本地支持,而无需Flash。 不幸的是,它们都不支持单一的音频格​​式。 MP3本来是个不错的选择,但Firefox不支持。 我们必须将声音转换为多种格式。 最佳组合是OGG和MP3格式。 为了转换音频元素,我们使用了免费的在线文件转换器Online Convert

    Buzz allows us to group sounds in order to easily control them. This is what we do with all the camera sounds.

    嗡嗡声使我们可以对声音进行分组,以便轻松控制它们。 这就是我们处理所有相机声音的方法。

    If the user’s browser doesn’t support the HTML5 audio element, Buzz degrades properly. In that case, we’ll simply hide the volume button.

    如果用户的浏览器不支持HTML5音频元素,则Buzz会正常降级。 在这种情况下,我们只需隐藏音量按钮。

    The traffic sound is played and looped as soon as it is loaded.

    交通声音在加载后即被播放并循环播放。

    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();
    }
    
    trafficSound.loop().play().fadeIn( 5000 );
    
    

    Now, let’s work on our thumbnails. We have to adjust the total width of the thumbnails bar. Without this step, the thumbnails would be display in more than one row.

    现在,让我们来制作缩略图。 我们必须调整缩略图栏的总宽度。 没有此步骤,缩略图将显示在多行中。

    $thumbnails.find( 'ul' ).width( function() {
        var totalWidth = 0;
        $( this ).find( 'li' ).each( function() {
            totalWidth += $( this ).outerWidth( true );
        });
        return totalWidth;
    });
    

    We’ll now apply jScrollPane to the thumbnails container. jScrollPane provides an easy way to work with its API. We use that in order to render a proper scrollbar when the window is resized. This API will be useful in a further step.

    现在,我们将jScrollPane应用于缩略图容器。 jScrollPane提供了一种使用其API的简便方法。 我们使用它来在调整窗口大小时呈现正确的滚动条。 此API在下一步中将很有用。

    $thumbnails.jScrollPane();
    
    var jScrollPaneApi = $thumbnails.data( 'jsp' );
    
    $( window ).bind( 'resize', function() {
        jScrollPaneApi.reinitialise();
    });
    

    Now, the Vegas plugin needs to be set. We’ll fill the picture array by grabbing some information from the thumbnails list and pass it to Vegas in order to start the slideshow. A four second delay is applied between the slides.

    现在,需要设置Vegas插件。 我们将通过从缩略图列表中获取一些信息来填充图片阵列,并将其传递给Vegas以开始幻灯片放映。 幻灯片之间施加了四秒钟的延迟。

    $thumbnails.find( 'a' ).each( function() {
        pictures.push({
            src: $( this ).attr( 'href' ),
            title: $( this ).find( 'img' ).attr( 'title' ),
            valign: $( this ).find( 'img' ).data( 'valign' )
        });
    })
    
    $.vegas( 'slideshow', {
        backgrounds: pictures,
        delay: 4000
     })( 'overlay' );
    

    Vegas triggers a bunch of events. The one we need now is the onload event trigger when a slide is loaded and displayed. With the src attribute of the loaded image, we’ll get the number of the currently active thumbnail. Also, a sound is played.

    拉斯维加斯引发了一系列事件。 我们现在需要的是加载和显示幻灯片时的onload事件触发器。 使用已加载图像的src属性,我们将获得当前活动缩略图的编号。 此外,还会播放声音。

    $( 'body' ).bind( 'vegasload', function( e, img ) {
        var src = $( img ).attr( 'src' ),
            idx = $( 'a[href="' + src + '"]' ).parent( 'li' ).index();
    
        focusSound.play();
    
        // ...
    });
    

    The title is modified in order to hold the picture title and is displayed with a nice fade-out/fade-in effect.

    标题经过修改以保留图片标题,并以淡入/淡入效果显示。

        $title.fadeOut( function() {
            $( this ).find( 'h1' ).text( pictures[ idx ].title );
            $( this ).fadeIn();
        });
    

    The flash is fired…

    闪光灯被闪光…

        $flash.show().fadeOut( 1000 );
    

    The pointer has to move over the current thumbnail. The jScrollPane API is used to automatically scroll the bar as the pointer is off the screen, but not if the user hovers over the bar.

    指针必须在当前缩略图上移动。 jScrollPane API用于在指针离开屏幕时自动滚动条,但如果用户将鼠标悬停在条上则不会使用。

        var pointerPosition = $thumbnails.find( 'li' ).eq( idx ).position().left;
    
        $pointer.animate({
            left: pointerPosition
        }, 500, 'easeInOutBack' );
    
        if ( ( pointerPosition > $thumbnails.width()
            || pointerPosition < jScrollPaneApi.getContentPositionX() )
            && !$thumbnails.is( ':hover' ) ) {
                jScrollPaneApi.scrollToX( pointerPosition, true );
        }
    
        $pointer.click( function() {
            $thumbnails.find( 'a' ).eq( idx ).click()
        });
    

    Let’s see what we have to do with our volume button. The idea is to mute or unmute some sounds as the button is clicked. We change the class of the button and set the muting or playing of the sounds accordingly.

    让我们看看我们与音量按钮有什么关系。 这个想法是在单击按钮时使某些声音静音或取消静音。 我们更改按钮的类别,并相应地设置声音的静音或播放。

    $volume.click( function() {
        if ( $( this ).hasClass( 'all' ) ) {
            cameraSounds.unmute();
            trafficSound.mute();
    
            $( this ).removeClass( 'all' ).addClass( 'some' );
        } else if ( $( this ).hasClass( 'some' ) ) {
            cameraSounds.mute();
            trafficSound.mute();
    
            $( this ).removeClass( 'some' ).addClass( 'none' );
        } else {
            cameraSounds.unmute();
            trafficSound.unmute();
    
            $( this ).removeClass( 'none' ).addClass( 'all' );
        }
        return false;
    });
    

    Our gallery is almost set. Now we want that clicking a thumbnail displays a new slide and pauses the slideshow. Its cursor is set to the current number of the clicked thumbnail. That way the slideshow will restart at the right position. All the elements of the page are hidden and we display a “paused” message.

    我们的画廊快要摆好了。 现在,我们希望单击缩略图以显示新幻灯片并暂停幻灯片放映。 其光标设置为单击的缩略图的当前编号。 这样,幻灯片将在正确的位置重新开始。 页面的所有元素都被隐藏,我们显示“已暂停”消息。

    Another sound is played.

    播放另一种声音。

    $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;
    });
    

    A click on the “paused” word restarts the slideshow and the thumbnails and title are shown again.

    单击“已暂停”一词将重新开始幻灯片放映,并且缩略图和标题将再次显示。

    $pause.click( function() {
        $pause.hide();
        $pointer.show();
    
        $volume.animate( { top:'100px' });
        $title.animate( { bottom:'0px' });
        $thumbnails.animate( { top:'0px' });
    
        $.vegas( 'slideshow' );
    
        clickSound.play();
    
        return false;
    });
    

    That’s it! We hope you enjoyed the tutorial of mashing up some plugins and like the noisy result!

    而已! 我们希望您喜欢混搭一些插件的教程,并且喜欢嘈杂的结果!

    翻译自: https://tympanus.net/codrops/2011/07/05/fullscreen-slideshow-with-html5-audio/

    html设置幻灯片铺满全屏

    展开全文
  • 重用幻灯片 当想引用另一张幻灯片到本文档时,不只是复制粘贴,因为会显得格格不入,我们 复制想加入的幻灯片 定位一张幻灯片 新建幻灯片——重用幻灯片——会出现一个来源地址,点击下方的浏览,选择像插入幻灯片...

    重用幻灯片

    当想引用另一张幻灯片到本文档时,不只是复制粘贴,因为会显得格格不入,我们

    • 复制想加入的幻灯片
    • 定位一张幻灯片
    • 新建幻灯片——重用幻灯片——会出现一个来源地址,点击下方的浏览,选择像插入幻灯片的文件——选择要插入的幻灯片,点击下方的保留原格式
      在这里插入图片描述

    替换字体

    替换——替换字体
    在这里插入图片描述
    选择要替换的字体
    在这里插入图片描述

    展开全文
  • 这个问题有几天了。就是在其他人的PowerPoint2010做的ppt文件,发到这台有问题的电脑上...看来不是软件版本的问题,那最可能的就是系统的字体问题,接着又下载了字体安装,中间有几次有一部分已经显示正常,但是

    这个问题有几天了。就是在其他人的PowerPoint2010做的ppt文件,发到这台有问题的电脑上(PowerPoint2007)就会显示完全不一样,如下所示。


    而正常的文件显示是这样的:


    一开始以为是软件的问题,重新安装了2007可是症状依旧,后续又重新安装了2010版本,可是显示不正常。

    看来不是软件版本的问题,那最可能的就是系统的字体问题,接着又下载了字体安装,中间有几次有一部分已经显示正常,但是不完全正常,过会又不正常了。我又从其他的windows7系统中拷贝了字体复制到这里可是还是不行。

    又对系统打了补丁,使用360扫描了系统,现象还是依旧。

    最后实在没有更好的方法,从镜像恢复系统后,安装office软件显示都正常了。

    展开全文
  • 点击工具栏上的“视图-幻灯片母版”,然后选中母版上需要改变默认字体的模版文本框,为其设置字体。关闭母版视图后,对应的字体就改过来了。
  • Focusky(也称为“FS软件”)支持用户设置字幕字体,底部间距及动画效果,带来更好的幻灯片展示效果。 找到想要编辑的字幕所在的缩略图,选中右侧的“添加字幕与声音”按键, 进入编辑页面。 置字幕字体 ...
  • 改变一个ppt所有的幻灯片的背景色和字体颜色修改所有...随便找到一页幻灯片,右键,选择设置背景格式 修改填充颜色,再全部应用即可 修改所有ppt的字体颜色 按图片步骤打开 注意要选中文本框 修改成功!!! ...
  • 怎么样能使PPT中所有的字体一次性加粗,用CTRA+A全选只能选中幻灯片而不在电脑桌面上找到PPT演示文稿。并将PPT演示文稿双击打开。打开了文稿之后,在幻灯片里面找到大纲视图,并点击它,将幻灯片切换到大纲视图。...
  • 幻灯片制作之不同字体的使用

    千次阅读 2008-03-10 10:11:00
    字体的使用同样可以应用于幻灯片的制作中,一款合适的字体能够给你的幻灯片增色不少。字体分为英文部分和中文部分,关于字体的安装和使用不做赘述,网上有很多教程。字体的获取也很简单,只要能叫出名字的字体都能...
  • LaTeX制作幻灯片

    千次阅读 2019-08-08 22:53:09
    LaTeX\LaTeXLATE​X幻灯片制作采用的是beamer类。...所以如果我要实现幻灯片的标题和正文字体设置可以通过下面的命令: \setsansfont{TeX Gyre Termes} %设置西文字体为times new roman \setCJKsan...
  • 1、多媒体演示文稿 PowperPoint的制作,25.06.2020,a,2,本次课程所讲内容,PowerPoint的窗口界面 幻灯片的基本设置 制作幻灯片 动画设置 创建超级链接 演示文稿的放映,25.06.2020,a,3,本次课程所讲内容,Pow...
  • 海贼王悬赏令幻灯片

    2019-10-27 23:14:04
    海贼王悬赏令幻灯片
  • 幻灯片母版使用

    2015-08-08 23:14:39
    在ppt文件中,进入到幻灯片母版编辑模式(视图菜单下选择“母版”,再选择“幻灯片母版”),然后直接编辑这个幻灯片母版,设置标题的字体,再通过自定义动画,设置标题的显示效果,其它文字一样设置。编辑好幻灯片...
  •  除了需要对幻灯片中文本的字体格式进行设置外,还需要对文本的段落格式进行设置,使各段落之间的层次结构更清晰。 关-1- 注-1-公-1-众-1-号-1-"求学若渴"下载完整视频OFFICE教程 一,实战: 设置市场拓展策划方案...
  • 使用Focusky(也称为“FS软件”),不仅可以为文本内容添加艺术字效果,还可以直接运用字体纹理效果。 步骤如下: 1、打开任意工程文件,单击“文本 ”按钮,输入相应的文本内容。 【图1▲】 2、选中文字,在...
  • 2006-11-27用什么软件可以把大批相片制作成幻灯片,还利用PowerPoint 2000轻松制作课件多媒体课件已经越来越广泛地应用在现代化教育中,许多教师可能觉得课件制作的难度比较高。其实PowerPoint 2000是一个很方便的...
  • 利用MATLAB实现幻灯片的省墨打印,刘静,,在教学和学习中,经常需要打印幻灯片。但是深色背景、浅色字体又包含数学公式等非常规插入对象的幻灯片最为常用。但是要这种幻灯
  • 制作幻灯片

    千次阅读 2010-07-24 15:38:00
    制作幻灯片
  • 幻灯片母板PowerPoint’s Slide Master lets you keep consistency throughout your presentation. If you want to customize a presentation’s fonts, headings, or colors in one place so that they apply to ...
  • 幻灯片案例说明

    2021-06-27 19:04:49
    2,鼠标双击,矩形打上幻灯片即将开始,也可以打其它的 3,鼠标右键,选择转换为动态面板 4,点击复制,复制4个,点击2编辑状态 5,双击矩形,打上3字体大小为48,点击填充颜色,更改颜色 ...
  • 用Beamer制作幻灯片(卷二 色彩篇)

    万次阅读 多人点赞 2014-02-12 21:28:45
    在用Beamer类制作幻灯片卷一里讲解了怎么使用Latex的简单的类来制作幻灯片,只是给了基本的怎么制作幻灯片的一个大体框架。但是一个很好的幻灯片远远不止这些功能。 beamer的功能还有很多。今天要介绍的内容就是给...
  • Movavi Slideshow Maker是一个实用的幻灯片制作工具,可让您将相册变成精美的幻灯片。这是一个功能强大且易于使用的工具,可立即制作和编辑自己的幻灯片。借助Movavi幻灯片制作工具,您现在可以轻松制作幻灯片。 ...
  • jquery背景动画和图片文字动画结合的幻灯片切换 jquery背景动画和图片文字动画结合的幻灯片切换
  • 大屏幻灯片商务网站模板是一款超级大气的宽屏网站模板。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • LaTeX幻灯片通用简洁模板(Beamer)

    万次阅读 多人点赞 2018-10-11 11:01:54
    LaTeX幻灯片通用简洁模板(Beamer) 提供一个Ctex套装下使用WinEdt编辑器的xelatex编译可以通过的一个LaTex幻灯Beamer模板,使用方法为将代码拷贝进WinEdt文档,使用xelatex编译(一般Beamer都用这个编译,不用多想...
  • pptx 批量操作幻灯片

    2019-12-05 12:16:50
    本文示例使用python-pptx模块批量生成幻灯片,批量修改导入幻灯片表格内容及格式,以及在指定页插入表格 前言 一个prs对象就是一棵树,它的下面挂载了多张幻灯片slide,而每张幻灯片下有多个shape实例,也就是你在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,900
精华内容 4,360
关键字:

如何设置幻灯片字体