2016-04-12 5 views
-1

Im new для asp.net и javascript. Достаточно хорошо осведомлены о html и css. Я пытаюсь выполнить мой проект asp.net, но имею проблему с внедрением javascript на моей странице aspx. im пытается создать прокрутку параллакса, используя stellar.js, но не работает.Проблема с реализацией javascript в aspx page

вот 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> 

но доцент работу. Хотя он отлично работает на простой странице html.

Ps-im не использует главную страницу или держатель содержимого на этой странице. Он состоит исключительно из 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; 


    } 

Заранее спасибо за все Ваши ответы.

+1

Открытых инструментов разработчика браузера (F12) вы видите какую-либо ошибку в закладке консоли? – Zaki

+0

Btw в соответствии с их документом, они говорят, что сначала запускают элемент steller, поэтому вам нужно создать элемент или запустить его в окне: $ (window) .stellar(); // или: $ ('# main'). Stellar(); – Zaki

+0

убедитесь, что вы указали путь corect в src –

ответ

1

вы забыли закрыть атрибут типа в первой строке

+0

Просто заметил, что он закрыт на главной странице, поэтому ...: '( –

+0

- ваш файл jquery.stellar.js находится в той же папке вашего проекта, если это не вы должен обратиться к нему точно –

+0

Да, они находятся в одной папке. –

Смежные вопросы