Javascript Jquery在github页面中不工作_Javascript_Jquery_Html_Css

Javascript Jquery在github页面中不工作

javascript jquery html css

Javascript Jquery在github页面中不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,不知道为什么jquery不工作。我的幻灯片无法移动。我知道我的代码可能有问题，只是不知道是什么。我不知道Jquery是否应该在github上工作但以下是我的一些代码： <!DOCTYPE html> <html> <head> <title>portfolio</title> <style> #inside{ width: 100%; height: 820px; border:0px solid gre

不知道为什么jquery不工作。我的幻灯片无法移动。我知道我的代码可能有问题，只是不知道是什么。我不知道Jquery是否应该在github上工作但以下是我的一些代码：

<!DOCTYPE html>
<html>
<head>
    <title>portfolio</title>
<style>


#inside{
 width: 100%;
 height: 820px;
 border:0px solid green ;
background-color: #F1F1F1;
 margin-top: -150px;

}
#inside2{
    width: 100%;
    height: 750px;
    border: 0px solid black;
    margin-top: 0PX;
margin-left: -20px;
}


#person{
    transform: rotate(-45deg);
    margin-left: 120px;
    width: 100px;
    height: 300px;
    position:relative;
}
#arnd2{
transform: rotate(-45deg);
    margin-top: 100px;
position:relative;
    width: 1300px;
    height: 500px;
    border: 0px solid white;
    display: inline-block;
    margin-left: 100px;
}
#square1{
    border-radius: 100%;
    margin-top: 100px;
position:absolute;
    width: 300px;
    height: 300px;
    border:  3px solid white;
    display: inline-block;
    margin-left: -30px;
}
#square2{
margin-left: 370px;
    margin-top:100px;
position: absolute;
    width: 300px;
    height: 300px;
    border: 3px solid white;
    display: inline-block;
    border-radius: 100%;
}
#square3{
    margin-left: 820px;
    margin-top:100px;
position: relative;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    border: 3px solid white;
    display: inline-block;
}

.arnd{

    margin-left: 0px;
    background-size: 100%,700px;
    height: 700px;
margin-top: 0px;
    width: 100%;
overflow-x: hidden;
overflow-y: hidden;
    overflow: hidden;
    border: 0px solid #c9a9b2;

}

img{

    width: 700px;
    height: 700px;
position: absolute;
margin-top: -200px;
margin-left: 0px;
}
img #bottom2{
position: relative;
    width: 700px;
    height: 700px;
margin-top: 470px;
margin-left: 0px;
}
#fash{

    width: 700px;
    height: 700px;
    margin-left: -200px;
    margin-top: 0px;

}




#diamond1{
    position: relative;
    display: inline-block;
    width: 600px;
    height: 500px;
    border:0px solid black;
    margin-left: -200PX;
    margin-top: 230PX;
    overflow:hidden;
    z-index: 1px;


}

#diamond2{
    position: relative;
    display: inline-block;
    width: 500px;
    height: 550px;
    border:0px solid pink;
    margin-left: 450PX;
    margin-top:-1265px;
    overflow:hidden;
    z-index: 1px;
}

#diamond3{
    position: relative;

    display: inline-block;
    width: 600px;
    height: 500px;
    border:0px solid black;
    margin-left: 1000PX;
    margin-top:-600PX;
    overflow:hidden;
    z-index: 1px;

}


hover:#diamond1,#diamond2,#diamond3{
border-radius: 100%;


}

#logo{

    margin-top:20px; 
    width: 250px;
height: 250px;

margin-left: 620px;
}


h1{
    display: inline-block;
    background-color: black;
    border: 3px solid white;
position: absolute;
    text-align: center;
    font-size: 130px;
    font-family:goldoni;
    letter-spacing: 6px;
margin-top: -350px;
margin-left: -730px;
color: white;
z-index: 1px;
width: 900px;
padding: 30px;

}
#back{

position:absolute;
    font-size: 70px;
    width: 500px;
padding: 40px;
background-color: black;
border: 1px solid black;
opacity: 0.7;
    margin-top:-10px;
margin-left: -150px;    
}
#hide2{
        display: inline-block;
    background-color: black;
    border: 3px solid white;

    text-align: center;
    font-size: 130px;
    font-family:goldoni;
    letter-spacing: 6px;
margin-top: -350px;
margin-left: 230px;
color: white;
z-index: 1px;
width: 900px;
padding: 30px;
display: none;
}
#arrow{
    width: 70px;
    height: 70px;
    margin-top: -300px;
    margin-left: 1200px;
}
#arrow2{
    transform: rotate(-180deg);
    width: 70px;
    height: 70px;
    margin-top: -300px;
    margin-left: 100px;
}


#hide{
        display: inline-block;
    background-color: black;
    border: 3px solid white;

    text-align: center;
    font-size: 100px;
    font-family:goldoni;
    letter-spacing: 6px;
margin-top: -350px;
margin-left: 430px;
color: white;
z-index: 1px;
width: 870px;
padding: 40px;
display: none;

}

p{
        font-family: carolina hills personal use;
margin-top: 40px;
    text-align: center;
position: absolute;
color: BLACK;
    margin-left: 25px;
    font-size: 30px;
margin-top: 200px;
}
#line{
    margin-top: 230px;
border-bottom: 1px solid white;
margin-left: 225px;
    width: 1000PX;

}
#icon{
    width: 40px;
    height: 40px;
    position: absolute;
    margin-left: 1300px;
    margin-top:50px;


}






</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"> </script>

    <script >

$(document).ready(function(){
$("#arrow2").mouseover(function(){

        $("#diamond1,#diamond2,#diamond3").animate({"left":"600px"},1000,function(){


$("h1").hide();
$("#hide2").show();
$("#hide").hide();

});


});

$("#diamond2").mouseover(function(){
        $("#diamond1,#diamond2,#diamond3").animate({"left":"0px"},1000,function(){;
$("h1").show();
$("#hide").hide();
$("#hide2").hide();
});
    });
$("#arrow").mouseover(function(){
        $("#diamond1,#diamond2,#diamond3").animate({"left":"-400px"},1000,function(){
$("h1").hide();
$("#hide2").hide();
$("#hide").show();


});
});
});

    </script>


文件夹
#里面{
宽度：100%；
高度：820px；
边框：0px纯绿色；
背景色：#f1f1；
利润上限：-150px；
}
#内部2{
宽度：100%；
高度：750px；
边框：0px纯黑；
边际上限：0PX；
左边距：-20px；
}
#人{
变换：旋转（-45度）；
左边距：120像素；
宽度：100px；
高度：300px；
位置：相对位置；
}
#arnd2{
变换：旋转（-45度）；
边缘顶部：100px；
位置：相对位置；
宽度：1300px；
高度：500px；
边框：0px纯白；
显示：内联块；
左边距：100px；
}
#平方1{
边界半径：100%；
边缘顶部：100px；
位置：绝对位置；
宽度：300px；
高度：300px；
边框：3倍纯白；
显示：内联块；
左边距：-30px；
}
#平方2{
左边距：370px；
边缘顶部：100px；
位置：绝对位置；
宽度：300px；
高度：300px；
边框：3倍纯白；
显示：内联块；
边界半径：100%；
}
#平方3{
左边距：820px；
边缘顶部：100px；
位置：相对位置；
宽度：300px；
高度：300px；
边界半径：100%；
边框：3倍纯白；
显示：内联块；
}
阿恩德先生{
左边距：0px；
背景尺寸：100%，700px；
高度：700px；
边际上限：0px；
宽度：100%；
溢出x：隐藏；
溢出y：隐藏；
溢出：隐藏；
边框：0px实心#c9a9b2；
}
img{
宽度：700px；
高度：700px；
位置：绝对位置；
利润上限：-200px；
左边距：0px；
}
img#bottom2{
位置：相对位置；
宽度：700px；
高度：700px；
边缘顶部：470像素；
左边距：0px；
}
#法什{
宽度：700px；
高度：700px；
左边距：-200px；
边际上限：0px；
}
#钻石1{
位置：相对位置；
显示：内联块；
宽度：600px；
高度：500px；
边框：0px纯黑；
左边距：-200PX；
利润上限：230像素；
溢出：隐藏；
z指数：1px；
}
#钻石2{
位置：相对位置；
显示：内联块；
宽度：500px；
高度：550px；
边框：0px纯红；
左边距：450PX；
页边顶部：-1265px；
溢出：隐藏；
z指数：1px；
}
#钻石3{
位置：相对位置；
显示：内联块；
宽度：600px；
高度：500px；
边框：0px纯黑；
左边距：1000PX；
利润上限：-600PX；
溢出：隐藏；
z指数：1px；
}
悬停：#钻石1，#钻石2，#钻石3{
边界半径：100%；
}
#标志{
边缘顶部：20px；
宽度：250px；
高度：250px；
左边距：620px；
}
h1{
显示：内联块；
背景色：黑色；
边框：3倍纯白；
位置：绝对位置；
文本对齐：居中；
字体大小：130px；
字体系列：goldoni；
字母间距：6px；
利润上限：-350px；
左边距：-730px；
颜色：白色；
z指数：1px；
宽度：900px；
填充：30px；
}
#背{
位置：绝对位置；
字体大小：70px；
宽度：500px；
填充：40px；
背景色：黑色；
边框：1px纯黑；
不透明度：0.7；
利润上限：-10px；
左边距：-150px；
}
#躲藏{
显示：内联块；
背景色：黑色；
边框：3倍纯白；
文本对齐：居中；
字体大小：130px；
字体系列：goldoni；
字母间距：6px；
利润上限：-350px；
左边距：230像素；
颜色：白色；
z指数：1px；
宽度：900px；
填充：30px；
显示：无；
}
#箭{
宽度：70px；
高度：70像素；
利润上限：-300px；
左边距：1200像素；
}
#箭头2{
变换：旋转（-180度）；
宽度：70px；
高度：70像素；
利润上限：-300px；
左边距：100px；
}
#隐藏{
显示：内联块；
背景色：黑色；
边框：3倍纯白；
文本对齐：居中；
字体大小：100px；
字体系列：goldoni；
字母间距：6px；
利润上限：-350px；
左边距：430px；
颜色：白色；
z指数：1px；
宽度：870px；
填充：40px；
显示：无；
}
p{
字体系列：carolina hills个人使用；
边缘顶端：40px；
文本对齐：居中；
位置：绝对位置；
颜色：黑色；
左边距：25px；
字体大小：30px；
利润上限：200px；
}
#线{
利润上限：230像素；
边框底部：1px纯白；
左边距：225px；
宽度：1000PX；
}
#图标{
宽度：40px；
高度：40px；
位置：绝对位置；
左边距：1300px；
边缘顶部：50px；
}
$（文档）.ready（函数（）{
$（“#箭头2”）.mouseover（函数（）{
$（“#diamond1，#diamond2，#diamond3”）。动画（{“左”：“600px”}，1000，函数（）{
$（“h1”）.hide（）；
$（“#hide2”）.show（）；
$（“#隐藏”）.hide（）；
});
});
$（“#钻石2”）.mouseover（函数（）{
$（“#diamond1，#diamond2，#diamond3”）。动画（{“左”：“0px”}，1000，function（）{；
$（“h1”）.show（）；
$（“#隐藏”）.hide（）；
$（“#hide2”）.hide（）；
});
});
$（“#箭头”）.mouseover（函数（）{
$（“#diamond1，#diamond2，#diamond3”）。动画（{“左”：“-400px”}，1000，函数（）{
$（“h1”）.hide（）；
$（“#hide2”）.hide（）；
$（“#隐藏”）.show（）；
});
});
});

删除function（）后面的分号{；主要问题是它使用的是github pages资源，它使用的是HTTPS连接，而JQuery CDN使用的是HTTP连接。

钻石元素在哪里？请删除不需要的代码，以便简化调试。对于初学者，您缺少一个

。

src="http://code.jquery.com/jquery-3.1.1.js“

…也许页面正在使用https…检查浏览器开发工具控制台以获取提示…并加载外部资源，如

src=“//code.jquery.com/jquery-3.1.1.js“

where-possiblethanks从jquery src代码中获取https:out有效！！！！你能告诉我当前页面地址吗，我会快速查看一下。我尝试了你提供的代码，扔掉了所有与JS无关的东西，效果很好。要查看jquery是否在你的页面上有效，如果（jQuery的类型！='

$("#diamond2").mouseover(function(){
        $("#diamond1,#diamond2,#diamond3").animate({"left":"0px"},1000,function(){;
$("h1").show();