Question

这是巴拉。我有问题在html中添加外部css和js文件。

以下代码不起作用：

＆＃13;

$( window ).ready(function() {
    var wHeight = $(window).height();
    $('.slide')
      .height(wHeight)
      .scrollie({
        scrollOffset : -50,
        scrollingInView : function(elem) {

          var bgColor = elem.data('background');

          $('body').css('background-color', bgColor);
        }
      });

  });

＆＃13;

* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
  background: #3498db;
  width: 100px;
  height: 100px;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="2.css" />
  </head>
  <body>
  </body>
</html>

＆＃13;

Answer 1

试试这个。将link标记替换为此标记：

<link rel="stylesheet" type="text/css" href="2.css" />

但它也取决于您的css文件的存储位置。我不确定你发布JS部分的原因。也许你可以解释一下？

Answer 2

使用scroll功能：

$( window ).ready(function() {
    var wHeight = $(window).height();
    $('.slide')
      .height(wHeight)
      .scroll({
        scrollOffset : -50,
        scrollingInView : function(elem) {

          var bgColor = elem.data('background');

          $('body').css('background-color', bgColor);
        }
      });

  });

* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
  background: #3498db;
  width: 100px;
  height: 100px;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="2.css" />
  </head>
  <body>
    <div class="slide"></div>
  </body>
</html>

在html中包含外部js和css文件

2 个答案: