【发布时间】：2016-04-12 09:18:45
【问题描述】：
我是 asp.net 和 javascript 的新手。受过良好的关于 html 和 css 的教育。我试图完成我的 asp.net 项目，但在我的 aspx 页面中实现 javascript 时遇到问题。我试图使用 stellar.js 创建视差滚动，但它不起作用。
这里是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 页面的 head 部分中包含了这一行
<script src="JScript.js" type="text/javascript"></script>
但它不起作用。虽然它在一个简单的 html 页面中运行良好。
Ps- 我没有在此页面中使用母版页或内容占位符。它纯粹由html标签组成，甚至没有一个asp工具。
这里是 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) 你在控制台标签中看到任何错误吗？
-
顺便说一句，根据他们的文档，他们说首先再次运行 steller 元素，因此您需要创建一个元素或在窗口上运行它： $(window).stellar(); // 或：$('#main').stellar();
-
确保在 src 中指定正确的路径
-
Zaki，是的，控制台中有一个错误，上面写着：JScript.js:1 Uncaught SyntaxError: Unexpected token
-
而alex所有文件都在同一个文件夹中，所以我猜路径不是问题。
标签： javascript jquery html asp.net