我不确定为什么它不起作用，我尝试了很多不同的方法但它不想工作，我做错了什么？
我正在尝试添加 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
最佳答案
您没有正确引用脚本。您尝试包含的 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>
关于javascript - 简单的 js 添加 3d，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16464775/