簡單的js添加爲3d

我不知道爲什麼它不工作，我嘗試了很多不同的方式，但它不想工作，我做錯了什麼？簡單的js添加爲3d

我試着添加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(); 
});

有被obviosly conecting與JS代碼的問題IM我試圖把它放在頭部，身體之間。它只是工作。

的CSS工作percetly，這一切顯示正常它就是JS

來源

2013-05-09 Damien Curtis

你沒有正確引用腳本。您試圖包含的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-10 07:41:29 zik

我發現在你的HTML至少3個錯誤：

正如所說的Kiz，<link>不能用在頁面中插入JavaScript。你應該用<script>：

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

您正在使用從jQuery的lib方法，但似乎並沒有把它列入你的頁面。
由於您的JS現在是如果您插入它想要操縱的DOM元素之前，它將無法正常工作。你的腳本將無法「看到」他們，因爲他們沒有被添加到DOM樹。您應該：
- 將您的JS插入<body>的末尾。
- 使用「準備好」事件的處理程序將腳本封裝到頁面準備就緒時調用的方法中。使用jQuery：$(document).ready(function() { /* your code */ });

希望它能幫助。再見！

來源

2013-05-10 14:12:43 Aldream

簡單的js添加爲3d

回答

相關問題