-1
Im new asp.net and javascript。 htmlとcssに関する公正な教育。私のasp.netプロジェクトを完了しようとしていますが、私のaspxページにjavascriptを実装することに問題があります。 stellar.jsを使って視差スクロールを作成しようとしていますが、動作しません。aspxページでJavaScriptを実装する際に問題が発生しました。
は、ここではjavascriptのコード
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>
<script>
$.stellar({
scrollProperty: 'scroll',
});
</script>
であると私は私のhome.aspxページ
<script src="JScript.js" type="text/javascript"></script>
のheadセクションにこの行が含まれているが、それは仕事をdosent。それは簡単なHTMLページでうまく動作しますが。
このページでは、マスターページまたはコンテンツプレースホルダを使用していません。これは純粋にhtmlタグで構成されています。
ここがhome.aspxの内容です。あなたの答えのすべてを事前に
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bon Voyage</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="JScript.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<p><span style="color:Red; font-family:myFirstFont;">B</span>on <span style="color:Red; font-family:myFirstFont;">V</span>oyage</p>
<a href="#">HOME</a>
<a href="#aaa" >HOLIDAYS</a>
<a href="#">FLIGHT</a>
<a href="#">HOTELS</a>
<a href="#">BUS</a>
<a href="#">ABOUT</a>
<a href="#" style="padding-right:130px;">CONTACT US</a>
<a href="login.aspx" style="margin-left:200px; font-size:16px;">LOGIN</a>
</div>
<div id="container">
<div class="body1" >
<div class="onbody1">
<img class="icon" src="airplane-57-xxl.png"></img>
<hr width="62%" align="left"><p class="name">Bon Voyage</p> <hr width="62%" align="left">
<p class="desc">Your one stop shop for all your travelling needs.</p>
</div>
</div>
<div class="body2" data-stellar-background-ratio="0.3">
<p >asdadas</p>
</div>
<div class="body3">
<p id="aaa">asdadas</p>
</div>
</div>
</body>
とCSS
body
{
width: 100%;
}
@font-face {
font-family: myFirstFont;
src: url(chocolate_hippo.ttf);
}
.header{
position:fixed;
background-color: #333333;
height:70px;
width: 100%;
text-align:right;
line-height: 70px;
z-index:3;
}
.header a{
text-decoration:none;
color: white;
font-weight: 100;
padding-right:20px;
}
.header a:hover{color:#909090 ;}
.header p
{
float:left;
padding-right:150px;
font-family: myFirstFont;
color:White;
font-weight:bold;
font-size:35px;
margin-left:12px;
}
/*--------Style for home page----------*/
.body1
{
background-image: url('imageedit_4_6588588848.jpg');
height:1000px;
background-size:100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
.icon
{
margin-top:160px;
margin-bottom:30px;
margin-left:550px;
height:200px;
width:200px;
border:3px solid white;
border-radius:50%;
overflow: hidden;
transition-duration: 1s;
transition-property: transform;
opacity:0.9;
}
.icon:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border:8px solid white;
border-radius:1px;
}
.name
{
color:White;
font-size:70px;
opacity:0.8;
margin-left:456px;
margin-top:20px;
border-top:2px solid white;
border-bottom:2px solid white;
-o-transition:background 0.8s ease-in-out;
-ms-transition:background 0.8s ease-in-out;
-moz-transition: background 0.8s ease-in-out;
-webkit-transition: background 0.8s ease-in-out;
}
.desc
{
font-size:30px;
margin-left:350px;
margin-top:20px;
color:White;
opacity:0.9;
}
.body2
{
background-attachment:fixed;
height:500px;
background-image: url('page-4_img01_original.jpg');
background-repeat:no-repeat;
background-size:100%;
}
.body3
{
height:600px;
}
感謝を（はい初心者イム）。
オープン開発ツール（F12）のtype属性を閉じるのを忘れて？ – Zaki
Btwは彼らが言うように、要素を最初に実行して、要素を作成したり、ウィンドウでそれを実行したりする必要があります：$（window）.stellar（）; //または： $（ '＃main'）。stellar（）; – Zaki
src –