Question

我拿了this snippet并将所有代码放在index.html文件中，如下所示，但无论我在哪里放js，jquery它都不起作用。

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    position: absolute;
    width: 100%;
    height: 800px;
    overflow: hidden;
    left: 0;
}
.water {
    position: absolute;
    width: 100%;
    height: 800px;
    left:0;
    background-repeat: no-repeat;
    background-position: top center;
}
.water-layer1 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.water-layer2 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.water-layer3 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.water-layer4 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div class="parallax">
    <div class="water water-layer4"></div>
    <div class="water water-layer3"></div>
    <div class="water water-layer2"></div>
    <div class="water water-layer1"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  var currentX = '';
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
  if(currentX == '') currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
   if(currentY == '') currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
      var movement = (i + 1) * (xdiff * movementConstant);
      var movementy = (i + 1) * (ydiff * movementConstant);
      var newX = $(el).position().left + movement;
      var newY = $(el).position().top + movementy;
      $(el).css('left', newX + 'px');
      $(el).css('top', newY + 'px');
  });
});
});

  </script>
</body>
</html>

我得到ReferenceError: $ is not defined。 jQuery在脚本之前正在加载。

这可能是什么问题？

Answer 1

您已经两次引用了JQuery。删除其中一个并添加如下所述的引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" />

Answer 2

脚本中未加载jquery lib。

替换

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

与

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

快乐编码：）

JQuery $未定义

2 个答案: