简单的js添加3d
[英]Simple js add for 3d
问题描述
Im not sure why its not working, I've tried many different ways but it doesnt want to work, what am i doing wrong? 
我不确定为什么它不起作用，我尝试了许多不同的方法，但它不想起作用，我在做什么错？
Im trying to add 3D inset parallax Effect 我正在尝试添加3D嵌入式视差效果
my html 我的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>
my 3d.js file contains this 我的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();
});
The issue im having is obviosly conecting the js code with the page, ive tried putting it between in the head, body. 我遇到的问题是将js代码与页面强行联系起来，我尝试将其放在头部，正文之间。 It just doest work. 它只是行不通。
The CSS works percetly and it all appears fine its just the JS CSS可以正常工作，而只是JS看起来一切正常
2 个解决方案
解决方案1
0 2013-05-10 07:41:29
You're not referencing the script properly. 您没有正确引用脚本。 The JavaScript file that you're trying to include needs to be in an opening and closing <script></script> tag. 您要包含的JavaScript文件必须位于开始和结束<script></script>标记中。 Here's the reference to the documentation 这是对文档的参考
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1 http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1
You should put your JavaScript file like so, making sure it's within the opening and closing <head></head> tags. 您应该这样放置JavaScript文件，确保它位于开始和结束<head></head>标记内。 Which from your code I can see it already is. 从您的代码中我已经可以看到。
<script type="text/javascript" src="3d.js"></script>
解决方案2
0 2013-05-10 14:12:43
I spotted at least 3 errors in your html: 我在您的html中发现至少3个错误：
- As said by Kiz,
<link>can't be used to insert Javascript in a page.正如Kiz所说， <link>不能用于在页面中插入Javascript 。 You should use<script>:您应该使用<script>：
<script type="text/javascript" src="3d.js"></script>
- You are using methods from the JQuery lib, but don't seem to include it in your page. 您正在使用JQuery库中的方法，但似乎未将其包含在页面中。
- As your JS is right now, if you insert it before the DOM elements you want to manipulate, it won't work. 既然您的JS就是现在，那么如果您将其插入到要操作的DOM元素之前，它将无法正常工作。 Your script won't be able to "see" them, as they aren't added to the DOM tree yet. 您的脚本将无法“看到”它们，因为它们尚未添加到DOM树中。 You should either: 您应该：
- Insert your JS inside
<body>, at its end.将您的JS插入<body>的末尾。 - Encapsulate your script into a method called when the page is ready, using the handler for the " ready " event. 使用“ ready ”事件的处理程序，将脚本封装为在页面准备就绪时称为的方法。 With JQuery:
$(document).ready(function() { /* your code */ });使用JQuery： $(document).ready(function() { /* your code */ });
- Insert your JS inside
Hope it helps. 希望能帮助到你。 Bye! 再见！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.