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

スクリプトを適切に参照していません。含めようとしている 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 に答える