Question

我不确定为什么它不起作用，我尝试了很多不同的方法，但它不想工作，我做错了什么？

我试图添加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

Answer 1

您没有正确引用脚本。您尝试包含的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>

Answer 2

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

正如Kiz所说， <link>不能用于在页面中插入Javascript 。您应该使用<script>：

<script type="text/javascript" src="3d.js"></script>

您正在使用JQuery lib中的方法，但似乎并未将其包含在您的页面中。
正如您现在的JS一样，如果您在想要操作的DOM元素之前插入它，它将无法工作。您的脚本将无法“看到”它们，因为它们尚未添加到DOM树中。你应该：
- 将JS放在<body>的最后。
- 使用“ ready ”事件的处理程序将脚本封装到页面准备就绪时调用的方法中。使用JQuery：$(document).ready(function() { /* your code */ });

希望它有所帮助。再见！

简单的js为3d添加

2 个答案: