0

我不知道为什么它不工作，我尝试了很多不同的方法，但它不想工作，我做错了什么？

我正在尝试添加 3D 插图视差效果

我的 html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="3d.js" type="text/javascript" />
</head>
<body>

<div class="inset" style="margin:0 auto">
TEXT HERE
</div>
<h1>3D Inset Parallax Effect</h1>
<p class="inset">The following is an example of how you can create the illusion of a 3D       inset block-level element (with parallax on scroll position) using some basic CSS and     jQuery. To see the effect in action, just scroll the page.</p>
<h2>Example Form:</h2>
<form>
<label>
First Name:
<input class="inset" type="text" placeholder="Enter First Name" />
</label>
<label>
Last Name:
<input class="inset" type="text" placeholder="Enter Last Name" />
</label>
</body>
</html>

我的 3d.js 文件包含这个

var insets = $('.inset'),
origBorderWidth = parseInt(insets.css('border-top-width')),
win = $(window);
function set3D() {
var windowHeight = win.height();

insets.each(function() {
var self = $(this),
scrollHeight = win.scrollTop(),
elementPosition = self.position(),
positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100),
positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() -     scrollHeight) / windowHeight * 100);

self.css({
        'border-top-width' : origBorderWidth - (origBorderWidth *         (positionPercentTop / 100)) + 'px',
        'border-bottom-width' : origBorderWidth * (positionPercentBottom /     100) + 'px'
    });     
});
};

win.on('load scroll resize', function() {
set3D();
});

我遇到的问题显然是将 js 代码与页面连接起来，我尝试将其放在头部和正文之间。它只是不起作用。

CSS 工作得很好，它看起来都很好，它只是 JS

4

2 回答 2

0

我在您的 html 中发现了至少 3 个错误：

  • 正如 Kiz 所说，<link>不能用于在页面中插入 Javascript。你应该使用<script>：
<script type="text/javascript" src="3d.js"></script>
  • 您正在使用 JQuery 库中的方法，但似乎没有将其包含在您的页面中。
  • 就像你现在的 JS 一样，如果你将它插入到你想要操作的 DOM 元素之前，它将无法工作。您的脚本将无法“看到”它们，因为它们尚未添加到 DOM 树中。您应该：
    • 将你的 JS 插入<body>到它的末尾。
    • 使用“ ready ”事件的处理程序将您的脚本封装到页面准备就绪时调用的方法。使用 JQuery：$(document).ready(function() { /* your code */ });

希望能帮助到你。再见！

于 2013-05-10T14:12:43.767 回答
0

您没有正确引用脚本。您尝试包含的 JavaScript 文件需要位于开始和结束<script></script>标记中。这是对文档的参考

http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1

你应该像这样放置你的 JavaScript 文件，确保它在开始和结束<head></head>标记内。从您的代码中我可以看到它已经是。

<script type="text/javascript" src="3d.js"></script>
于 2013-05-10T07:41:29.677 回答