文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >HTML/JS项目独立工作，组合时失败

问HTML/JS项目独立工作，组合时失败
EN

Stack Overflow用户
提问于 2017-07-04 23:42:42
回答 1查看 61关注 0票数 0

我想为我在这个问题上的无知而道歉，我对此非常陌生！我有两个独立工作的项目，但当它们结合在一起时，就不会了。第一个项目是一个fullPage.js项目，第二个是(游标)视差项目。工作项目档案如下：

光标视差：

代码语言：javascript
运行
复制
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mouse Parallax Plugin Demo</title>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
    <script src="../jquery-parallax.js"></script>


    <script>
      $( document ).mousemove( function( e ) {
        $( '.background' ).parallax( -30, e );
        $( '.cloud1' )    .parallax( 10 , e );
        $( '.cloud2' )    .parallax( 20 , e );
        $( '.cloud3' )    .parallax( 30 , e );
      });
    </script>
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36251023-1']);
      _gaq.push(['_setDomainName', 'jqueryscript.net']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

    <style>

      body {
        padding: 0; margin: 0;
        overflow: hidden;
      }

      .background {
        position: absolute; top: -10%; left: -10%;
        width: 120%; height: 120%;
        z-index: 1;
        font-family: Courier;
      }

      .cloud {
        position: absolute;
        margin-top: 100px;
        margin-left: 100px;
        width: auto; height: auto;
        z-index: 2;
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <img src="imgs/background.jpg" alt="New York" class="background">

    <img src="imgs/BigCircles.png" alt="Clouds" class="cloud cloud1">
    <img src="imgs/mediumCircles.png" alt="Clouds" class="cloud cloud2">
    <img src="imgs/smallCircles.png" alt="Clouds" class="cloud cloud3">
  </body>
</html>

https://pastebin.com/bDSnQ2Nz

(为便于查看^)

fullPage.js

代码语言：javascript
运行
复制
<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello There.</title>


<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<link href='https://fonts.googleapis.com/css?family=Six Caps' rel='stylesheet'>
<link href="//fonts.googleapis.com/css?family=Playfair+Display" rel='stylesheet' type="text/css" />
<style>
body{
  padding: 0; margin: 0;
  overflow: hidden;

}

.background {
  position: absolute;
  z-index: 1;
}

.cloud {
  position: absolute;
  margin-top: 100px;
  margin-left: 100px;
  width: auto; height: auto;
  z-index: 2;
  opacity: 0.8;
}
/* Style for our header texts
* --------------------------------------- */
h1{
  font-size: 50px;
  font-family: "Six Caps";
  margin:0;
  padding:0;

}
h2{
  font-size: 65px;
  color: #5b5a57;
  line-height: 100%;
  letter-spacing: 5px;
  margin: 0 0 18px 0;
  font-family: "Six Caps";
}
h3 {
  font-family: "Playfair Display";
  font-weight: 100;
  font-size: 1px;
  letter-spacing: 1px;

}
table {
  font-family: "Six Caps";
  font-size: 20px;
  letter-spacing: 2px;
  border-collapse: collapse;
  width: 80%;

}
td, th {
  text-align: left;
  padding: 0px;
  padding-top: 10px;
}




/* Common styles
* --------------------------------------- */
img{
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}
.section{
  text-align:center;
  overflow:hidden;
}
.wrap{
  width: 1180px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.box{
  text-align: left;
  color: #5b5a57;
  font-size: 14px;
  line-height: 25px;
  font-family: "Playfair Display";

}

span {
  opacity: 0.5;
}

/* Section 0
* --------------------------------------- */
#section0{
  padding: 60px 0;
}
#section0 img{
  height: 100%;
  margin: 40px 0 0 0;
}

#container {
  width: 100%;
  height: 400px;
  background: url("imgs/backgroundImage.png");
}

/* Section 1
* --------------------------------------- */
#section1 img{
  position:absolute;
}
#section1 {
  background-image: url("imgs/backgroundImage.png");
  background-size: 100%;
}
#section1 .imgsContainer,
#staticImg .imgsContainer,
#section3 .imgsContainer{
  position: absolute;
  z-index: 1;
  left: 50%;
  display: block;
  margin-top: -288px;
  margin-left: -636px;
  width: 0;
  height: 0;

  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

#section1.moveUp .imgsContainer{
  top: 50%;
}

#section1.moveDown .imgsContainer,
#staticImg .imgsContainer{
  top: 90%;
}

#section1.active .imgsContainer{
  top: 50%;
}

#iphone2{
  z-index: 100;
}
#iphone2.active{
  -webkit-transform: translate3d(+300px, 0px, 0px);
  -moz-transform: translate3d(+300px, 0px, 0px);
  -ms-transform:translate3d(+300px, 0px, 0px);
  transform: translate3d(+300px, 0px, 0px);
}

#section1 .box{
  top: 22%;
  left: 42%;
  position: absolute;
  width: 582px;

}

#iphone2 {
  top: -50px;
  left: -425px;
}

#iphone3 {
  top: -50px;
  left: 106px;
}

#staticImg{
  display: block;
  position: absolute;
  z-index: 1;
  top: 200%;
  left: 0;
  width: 100%;
  min-width: 980px;
  height: 100%;

  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;

  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
#staticImg.moveDown{
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
#staticImg.moveUp{

  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#staticImg.moveDown .imgsContainer{
  top: 50%;
}
#staticImg.moveDown img{
  top: 155px;
}

#staticImg.active .imgsContainer{
  top: 50%;
}


#staticImg.active img{
  top: 487px;
}

.cloud {
  position: absolute;
  margin-top: 100px;
  margin-left: 100px;
  width: auto; height: auto;
  z-index: 150;
}

/* Section 2
* --------------------------------------- */
#section2 img{
  position:absolute;
}
#section2 .imgsContainer,
#staticImg .imgsContainer,
#section3 .imgsContainer{
  position: absolute;
  z-index: 1;
  left: 50%;
  display: block;
  margin-top: -288px;
  margin-left: -636px;
  width: 0;
  height: 0;

  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

#section2.moveUp .imgsContainer{
  top: 50%;
}

#section2.moveDown .imgsContainer,
#staticImg .imgsContainer{
  top: 90%;
}

#section2.active .imgsContainer{
  top: 50%;
}

#section2 .box{
  top: 22%;
  left: 42%;
  position: absolute;
  width: 582px;
}

#iphone-yellow{
  top: -35px;
  left: -222px;
}

#iphone-red{
  top: -194px;
  left: 106px;
}

#iphone-blue{
  top: 320px;
  left: 448px;
}

#iphone-green{
  left: 106px;
  position:absolute;
}

#staticImg{
  display: block;
  position: absolute;
  z-index: 1;
  top: 200%;
  left: 0;
  width: 100%;
  min-width: 980px;
  height: 100%;

  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;

  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
#staticImg.moveDown{
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
#staticImg.moveUp{

  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#staticImg.moveDown .imgsContainer{
  top: 50%;
}
#staticImg.moveDown img{
  top: 155px;
}

#staticImg.active .imgsContainer{
  top: 50%;
}


#staticImg.active img{
  top: 487px;
}

/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
.fp-tooltip{
  color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
  border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
  background: #AAA;
}

</style>

<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="../jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#fullpage').fullpage({
      'verticalCentered': false,
      'css3': true,
      'sectionsColor': ['#F0F2F4', '#f7f3eb', '#fff', '#fff'],
      'navigation': true,
      'navigationPosition': 'right',
      'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],

      'afterLoad': function(anchorLink, index){
        if(index == 2){
          $('#iphone3, #iphone2, #iphone4').addClass('active');
        }
      },

      'onLeave': function(index, nextIndex, direction){
        if (index == 3 && direction == 'down'){
          $('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
        }
        else if(index == 3 && direction == 'up'){
          $('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
        }

        $('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
        $('#staticImg').toggleClass('moveDown', nextIndex == 4);
        $('#staticImg').toggleClass('moveUp', index == 4 && direction == 'up');
      }
    });
  });
</script>

</head>

<body>
  <div id="fullpage">
    <div id="staticImg">
      <div class="imgsContainer">
        <img src="imgs/Mockup.png" alt="iphone" id="iphone-green" />
      </div>
    </div>

    <div class="section " id="section0">
      <h1>Hello There.</h1>
      <img src="imgs/iphone1.jpg" alt="iphone" />
    </div>
    <div class="section moveDown" id="section1">
      <div class="wrap">
        <div class="imgsContainer">
          <img src="imgs/iphone3.png" alt="iphone" id="iphone3" />
          <img src="imgs/iphone2.png" alt="iphone" id="iphone2" />
        </div>
        <div class="box">
          <h1>01.</h1>
          <h2>Some Text</h2>             
          <span>Even more text</span>
          <table>
            <tr>
              <th>Role</th>
              <th>Year</th>
              <th>Compensation</th>
            </tr>
            <tr>
              <td>Sole</td>
              <td>2016-2017</td>
              <td>Volunteer</td>
            </tr>
          </table>

        </div>
      </div>
    </div>
    <div class="section moveDown" id="section2">
      <div class="wrap">
        <div class="imgsContainer">
          <img src="imgs/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
          <img src="imgs/iphone-red.png" alt="iphone" id="iphone-red" />
          <img src="imgs/iphone-blue.png" alt="iphone" id="iphone-blue" />
        </div>

        <div class="box">
          <h2>Amazing stuff</h2>
          Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.

        </div>
      </div>
    </div>
  </div> 
</body>

</html>

(为便于查看^)

当我试图将它们结合起来时，由于某种原因，它们不起作用。特别是当它似乎失败时，当我添加：

代码语言：javascript
运行
复制
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="../jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#fullpage').fullpage({
      'verticalCentered': false,
      'css3': true,
      'sectionsColor': ['#F0F2F4', '#f7f3eb', '#fff', '#fff'],
      'navigation': true,
      'navigationPosition': 'right',
      'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],

      'afterLoad': function(anchorLink, index){
        if(index == 2){
          $('#iphone3, #iphone2, #iphone4').addClass('active');
        }
      },

      'onLeave': function(index, nextIndex, direction){
        if (index == 3 && direction == 'down'){
          $('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
        }
        else if(index == 3 && direction == 'up'){
          $('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
        }

        $('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
        $('#staticImg').toggleClass('moveDown', nextIndex == 4);
        $('#staticImg').toggleClass('moveUp', index == 4 && direction == 'up');
      }
    });
  });
</script>

在视差文件夹中，它“破坏”视差运动。您所能提供的任何帮助都将不胜感激！谢谢大家！

css
javascript
jquery
html
EN

回答 1

Stack Overflow用户

发布于 2017-07-05 00:33:03

控制台清楚地告诉了问题：Uncaught TypeError: $(...).parallax is not a function，也许我漏掉了什么东西，但我肯定您没有调用：

代码语言：javascript
运行
复制
<script src="jquery-parallax.js"></script>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44915256

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档