Javascript jQuery手册和视差

Javascript jQuery手册和视差,javascript,jquery,html,parallax,Javascript,Jquery,Html,Parallax,我在jQuery中学习了两个不同的教程。一个用于视差,另一个用于制作小册子。两者都以不同的方式加载图像。我的图像已加载,但在小册子中,它们应位于页面中,而尚未显示的页面应隐藏。问题是我所有的div(包括图像和文本)都会显示,页面不会翻转。 我收到一个JavaScript错误uncaughttypeerror:undefined不是$mybook.show()小册子({ 文件夹 动画组合画廊 今天,我们将使用jQuery创建一个动画公文包库。 注释覆盖效果 今天,我们将创建一个简单的叠加效果,

我在jQuery中学习了两个不同的教程。一个用于视差,另一个用于制作小册子。两者都以不同的方式加载图像。我的图像已加载,但在小册子中,它们应位于页面中,而尚未显示的页面应隐藏。问题是我所有的div(包括图像和文本)都会显示,页面不会翻转。 我收到一个JavaScript错误
uncaughttypeerror:undefined不是$mybook.show()小册子({


文件夹
动画组合画廊
今天,我们将使用jQuery创建一个动画公文包库。

注释覆盖效果 今天,我们将创建一个简单的叠加效果,以显示例如公文包中的注释

window.jQuery | | document.write(“”)

(函数($){
//设置变量
$window=$(window);
$slide=$(“.homslide”);
$body=$('body');
//法登所有部分
$body.imagesLoaded(函数(){
setTimeout(函数(){
//调整部分大小
调整窗口();
//淡入部分
$body.removeClass('loading').addClass('loaded');
}, 800);
});
函数调整窗口(){
//初始化Skrollr
//获取窗口大小
winH=$window.height();
//保持最低高度550

if(winHEdit:Nevermind。我认为您加载了两次jquery。插件被附加到第一个实例,但随后您使用
再次加载它


有没有可能
$().bulket
未定义?比如jquery.bulket.1.1.0.min.js由于某种原因无法加载。您可以在控制台中键入“$().bulket”,如果插件已加载且未定义,则应显示function


很抱歉将此作为回答而不是评论,但我还没有足够的分数来评论。

尝试以下加载顺序:

<script src="js/vendor/modernizr-2.7.1.min.js" type="text/javascript"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></sc‌​ript>
<script src="js/imagesloaded.js"></script> 
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>     
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>     
<script src="js/skrollr.js"></script>     
<script src="js/index.js"></script>


我试图只放一个jquery,但我的页面一直在加载。它从未完成加载。我只是尝试键入$().小册子在控制台中,我没有定义。但我不知道为什么小册子不会加载您正在删除
,而不是最上面的小册子?当页面继续加载时,您是否遇到任何错误?您需要删除jquery 1.4.4,它非常非常旧,jquery 1.9.1需要在jqueryui之前加载。此外,您的小册子.js是一个非常旧的版本。book现在让我们看一下v1.4.4。您基本上是以错误的顺序加载javascrpt文件。在图像加载后需要加载小册子。请尝试以下加载顺序:
Ahh,但clayton获得了学分……;-)我将输入我的注释作为答案,也许您可以接受。
( function( $ ) {

// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');

//FadeIn all sections   
$body.imagesLoaded( function() {
    setTimeout(function() {

          // Resize sections
          adjustWindow();

          // Fade in sections
          $body.removeClass('loading').addClass('loaded');

    }, 800);
});

function adjustWindow(){

    // Init Skrollr


    // Get window size
    winH = $window.height();

    // Keep minimum height 550
    if(winH <= 550) {
        winH = 550;
    }

    // Resize our slides
    $slide.height(winH);

    // Refresh Skrollr after resizing our sections
}
    } )( jQuery );

$(function() {
            var $mybook         = $('#mybook');
            var $bttn_next      = $('#next_page_button');
            var $bttn_prev      = $('#prev_page_button');
            var $loading        = $('#loading');
            var $mybook_images  = $mybook.find('img');
            var cnt_images      = $mybook_images.length - 3;
            var loaded          = 0;
            //preload all the images in the book,
            //and then call the booklet plugin

            $mybook_images.each(function(){
                var $img    = $(this);
                var source  = $img.attr('src');
                $('<img/>').load(function(){
                    ++loaded;
                    if(loaded == cnt_images){
                        $loading.hide();
                        $bttn_next.show();
                        $bttn_prev.show();
                        $mybook.show().booklet({
                            name:               null,                            // name of the booklet to display in the document title bar
                            width:              800,                             // container width
                            height:             500,                             // container height
                            speed:              600,                             // speed of the transition between pages
                            direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
                            startingPage:       0,                               // index of the first page to be displayed
                            easing:             'easeInOutQuad',                 // easing method for complete transition
                            easeIn:             'easeInQuad',                    // easing method for first half of transition
                            easeOut:            'easeOutQuad',                   // easing method for second half of transition

                            closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
                            closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
                            closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
                            closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
                            closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
                            covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)

                            pagePadding:        10,                              // padding for each page wrapper
                            pageNumbers:        true,                            // display page numbers on each page

                            hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
                            overlays:           false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
                            tabs:               false,                           // adds tabs along the top of the pages
                            tabWidth:           60,                              // set the width of the tabs
                            tabHeight:          20,                              // set the height of the tabs
                            arrows:             false,                           // adds arrows overlayed over the book edges
                            cursor:             'pointer',                       // cursor CSS setting for side bar areas

                            hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
                            keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
                            next:               $bttn_next,                     // selector for element to use as click trigger for next page
                            prev:               $bttn_prev,                     // selector for element to use as click trigger for previous page

                            menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
                            pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
                            chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

                            shadows:            true,                            // display shadows on page animations
                            shadowTopFwdWidth:  166,                             // shadow width for top forward anim
                            shadowTopBackWidth: 166,                             // shadow width for top back anim
                            shadowBtmWidth:     50,                              // shadow width for bottom shadow

                            before:             function(){},                    // callback invoked before each page turn animation
                            after:              function(){}                     // callback invoked after each page turn animation
                        });
                    }
                }).attr('src', source);
            });

        });
<script src="js/vendor/modernizr-2.7.1.min.js" type="text/javascript"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></sc‌​ript>
<script src="js/imagesloaded.js"></script> 
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>     
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>     
<script src="js/skrollr.js"></script>     
<script src="js/index.js"></script>