Javascript 韩元'；你不能装吗？_Javascript_Jquery_Html_Css_Grid

Javascript 韩元'；你不能装吗？

javascript jquery html css grid

Javascript 韩元'；你不能装吗？,javascript,jquery,html,css,grid,Javascript,Jquery,Html,Css,Grid,我目前正在网格上工作。我已经完成了所有步骤，就我所见，我没有发现任何错误（但这可能只是因为我看代码太久了） CSS和HTML似乎可以正常工作，但是javascript/jquery在我的文件中无法运行，尽管演示可以正常工作以下是相关代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

我目前正在网格上工作。我已经完成了所有步骤，就我所见，我没有发现任何错误（但这可能只是因为我看代码太久了）

CSS和HTML似乎可以正常工作，但是javascript/jquery在我的文件中无法运行，尽管演示可以正常工作

以下是相关代码：

<!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" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Noah Skullestad</title>
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grid.css" rel="stylesheet" type="text/css" />
<link href="../CSS/overgang.css" rel="stylesheet" type="text/css" />
<link href="../CSS/animsition.min.css" rel="stylesheet" type="text/css"/>
<link href="../fonts/font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="../CSS/normalize.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>

<!--- Scripts -->
<script type="text/javascript" src="../scripts/overganger.js"></script>
<script type="text/javascript" src="../scripts/animsition.min.js"></script>
<script type="text/javascript" src="../scripts/modernizr-custom.js"></script>
<script type="text/javascript" src="../scripts/jquery.kinetic.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../scripts/jquery.tmpl.min.js">  </script>
<script type="text/javascript" src="../scripts/grid.js"></script>

<script id="previewTmpl" type="text/x-jquery-tmpl">
        <div id="ib-img-preview" class="ib-preview">
            <img src="${src}" alt="" class="ib-preview-img"/>
            <span class="ib-preview-descr" style="display:none;">${description}</span>
            <div class="ib-nav" style="display:none;">
                <span class="ib-nav-prev">Previous</span>
                <span class="ib-nav-next">Next</span>
            </div>
            <span class="ib-close" style="display:none;">Close Preview</span>
            <div class="ib-loading-large" style="display:none;">Loading...</div>
        </div>      
    </script>
    <script id="contentTmpl" type="text/x-jquery-tmpl"> 
        <div id="ib-content-preview" class="ib-content-preview">
            <div class="ib-teaser" style="display:none;">{{html teaser}}</div>
            <div class="ib-content-full" style="display:none;">{{html content}}</div>
            <span class="ib-close" style="display:none;">Close Preview</span>
        </div>
    </script>   

<div id="ib-main-wrapper" class="ib-main-wrapper">
<div class="ib-main">
    <a href="#">
        <img src="../images/Grid/Thumbs/01.jpg" data-largesrc="../images/Grid/Originals/01.jpg" alt="image01" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/02.jpg" data-largesrc="../images/Grid/Originals/02.jpg" alt="image02" />
        <span> test</span>
    </a>
    <a href="#" class="ib-content">
        <div class="ib-teaser">
            <h2> Webdesign <span> av topp kvalitet</span></h2>
        </div>
        <div class="ib-content-full">
            <!--- Innhold --->
        </div>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/03.jpg" data-largesrc="../images/Grid/Originals/03.jpg" alt="image03" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/04.jpg" data-largesrc="../images/Grid/Originals/04.jpg" alt="image04" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/05.jpg" data-largesrc="../images/Grid/Originals/05.jpg" alt="image05" />
        <span> test</span>
    </a>
</div>
</div>

谢谢

似乎jQuery加载有问题。您可以使用

，当您在localhost中运行它并且没有指定协议时，路径将更改为

文件：//

。这不是问题-它将在生产服务器上工作

在测试和开发应用程序时，您可以将

http:

添加到

src

，这将解决此问题（在生产时，您可以再次添加

）

因此，jQuery脚本标记应该如下所示：

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

尝试在浏览器中打开“开发人员工具”或“检查器”，查看实际错误是什么，是否可以显示java脚本部分？有一些javascript可以实现查看文档。@Lauent我在其中编辑过：）

}
.ib-main-wrapper{
width: 100%;
overflow: hidden;
margin-top: 40px;
outline: none;
/*height dynamic*/
}
.ib-main{
position: relative;
width: 2546px;
}
.ib-main a{
float: left;
width: 210px;
height: 210px;
position: relative;
overflow: hidden;
margin: 0px 0px 2px 2px;
cursor: move;
background: #fcfcfc url(../images/Grid/annet/thumb_bg.jpg) no-repeat center center;
background-size: 110% 110%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
background: #fff url(../images/Grid/annet/ajax-loader.gif) no-repeat center center;
background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
opacity: 0.5;
}
.ib-main > a.ib-loading > span,
.ib-main a.ib-loading > span{
display: none;
}
.ib-main a img{
opacity: 0.95;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main > a > span{
display: block;
position: absolute;
width: 100%;
height: 20px;
line-height: 22px;
text-align: center;
font-size: 11px;
bottom: -20px;
left: 0px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main a:hover > span{
bottom: 0px;
}
.ib-main a:hover img{
opacity: 0.8;
}
.ib-main a:hover{
background-size: 100% 100%;
}
.ib-content{
background: #f9f9f9;
}
.ib-content .ib-teaser{
text-align: center;
background: #333;
width: 100%;
height: 100%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-teaser h2{
color: #fff;
font-size: 26px;
line-height: 26px;
padding-top: 40%;
text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-teaser h2 span{
text-transform: none;
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
display: block;
}
.ib-content .ib-teaser:hover{
background: #000;
}
.ib-content-preview{
position: absolute;
top: 44px;
left: 0px;
background: #000;
width: 100%;
height: 630px; /*dynamic*/
display: none;
}
.ib-content-preview .ib-teaser h2{
font-size: 50px;
padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
padding: 20px 0px 0px 5px;
font-size: 22px;
}
.ib-content-full{
font-family: 'Oswald';
text-transform: none;
line-height: 26px;
margin: 0px 40px;
border-top: 1px solid #333;
padding: 20px 0px;
font-size: 16px;
}
.ib-content-full p{
padding: 5px 0px;
}
.ib-preview{
overflow: hidden;
position: absolute;
top: 40px;
display: none;
}
.ib-preview-descr{
position: absolute;
bottom: 30px;
left: 10px;
z-index: 999;
font-size: 50px;
text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-preview img{
position: absolute;
}
.ib-nav span{
width: 53px;
height: 87px;
position: absolute;
top: 50%;
margin-top: -43px;
cursor: pointer;
text-indent: -9000px;
opacity: 0.6;
z-index: 999;
background: transparent url(../images/Grid/annet/nav.png) no-repeat top right;
right: 10px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.ib-nav span.ib-nav-prev{
background-position: top left;
left: 10px;
right: auto;
}
.ib-close{
top: 7px;
right: 7px;
background: transparent url(../images/close.png) no-repeat center center;
position: absolute;
width: 24px;
height: 24px;
cursor: pointer;
opacity: 0.2;
z-index: 999;
text-indent: -9000px;
}
.ib-nav span:hover, .ib-close:hover{
opacity: 1;
}
.ib-loading-large{
text-indent: -9000px;
width: 60px;
height: 60px;
background: #fff url(../images/ajax-loader.gif) no-repeat center center;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
z-index: 999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
opacity: 0.9;
}

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>