Question

我是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页面中工作正常。

请勿在此页面中使用母版页或内容占位符。它纯粹由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>&nbsp;<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;


    }

提前感谢您的所有答案。

Answer 1

您忘记在第一行关闭type属性

在aspx页面中实现javascript的麻烦

1 个答案: