2

なんらかの理由で、ポートフォリオ サイトで「スムーズな div スクロール」が機能しません。これは私が使用しているチュートリアルへのリンクです: http://www.smoothdivscroll.com/#howitworks

頭の中でデモに記載されているトップ コードを使用します。

「スライダー」divで、このスライダーを表示したい場所であるため、「」とラベル付けしたdivの間に記載されている2番目のコードを使用します。

私はプラグインにかなり慣れていませんが、このスライダーを機能させたいと思っています。

最後に、既に設定した CSS で最後に述べたコード (CSS) を使用します。うまくいかず、髪を引っ張っています。同じスライダーを使用する他の人のコードも使用しようとしましたが、うまくいきません。

助けてください、私は必死です！私はこのウェブサイトを完成させる必要があります:(

4

2 に答える 2

0

サーバー上のスクリプトへのホットリンクはテストのためだけに問題ないと思いますが、これらのリンクを永続的なソリューションに使用しないでください。

GitHubから最新バージョンのzipをダウンロードする場合は、「箱から出して」すぐにクリックして実行できるテストページが含まれています。デモをローカルで実行する場合は、これがより適切なソリューションです。

于 2012-09-28T11:11:52.010 に答える
0

これは、スムーズ スクロール プラグインの完全に機能するデモ ページです。次の html をコピーして、コンピューターに demo.html として貼り付けます。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Div Scroll</title>
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<style type="text/css">
#scroller {
  width:100%;
  height: 330px;
  position: relative;
}
#scroller div.scrollableArea img {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#scroller").smoothDivScroll({
      mousewheelScrolling: true,
      manualContinuousScrolling: true,
      visibleHotSpotBackgrounds: "always",
      autoScrollingMode: "onstart"
    });
  });
</script>
</head>

<body>
  <div id="scroller">
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" />
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" />
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" />
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" />
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" />
  </div>

</body>
</html>

このファイル demo.html をブラウザー (Firefox または Chrome 推奨:)) で開き、メイン メニューに移動 > > (demo2.html) をSave Page As選択すると、ブラウザーはすべての依存関係 (必要なライブラリ) を保存し、すべての絶対値をWeb Page Completeローカル ハードディスク上の相対リンク。これが機能を実現する最も簡単な方法だと思います。

于 2012-08-18T09:39:12.507 に答える