2

出于某种原因，我无法让“平滑的 div 滚动”在我的投资组合网站上工作......我想知道是否有明显的我做错了。这是我正在使用的教程的链接： http ://www.smoothdivscroll.com/#howitworks

我使用头部演示中提到的顶级代码。

我使用在我标记为“的 div 之间提到的第二个代码，因为这是我希望在“滑块”div 中显示此滑块的位置。

我对插件相当陌生，但我非常坚持希望这个滑块能够工作。

最后，我在我已经设置的 CSS 中使用了最后提到的代码（CSS）。它不起作用，我正在拔头发。我也尝试过使用其他人使用相同滑块的代码，但它不起作用。

请帮忙，我很绝望！我需要完成这个网站:(

4

2 回答 2

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 :)），进入主菜单 > Save Page As> 选择Web Page Complete（demo2.html），浏览器将保存所有依赖项（它需要的库）并将所有绝对转换为本地硬盘上的相对链接。我想这是让它发挥作用的最简单方法。

于 2012-08-18T09:39:12.507 回答
0

我想热链接到我服务器上的脚本只是为了测试是可以的，但不要将这些链接用于您的永久解决方案。

如果您从 GitHub 下载最新版本的 zip，我已经包含了一个测试页面，您应该能够单击并直接“开箱即用”运行。如果您想在本地运行演示，这是一个更好的解决方案。

于 2012-09-28T11:11:52.010 回答