gpt4 book ai didi

javascript - Z-index 阻止 gif 动画的运行 | Jquery CSS HTML JS

转载 作者:行者123 更新时间:2023-12-04 03:45:23 25 4
gpt4 key购买 nike

<分区>

我尝试使用 jquery.js 在图像 block 中创建悬停 gif 动画。

我在以三列网格排列的水平或垂直 block 中使用这些动画。当您将鼠标悬停在该 block 上时,将启动 gif,并在该 gif 上添加混合模式下的彩色表格和排版

在我的第一个示例中一切正常,但是当我想将此代码添加到我网站的页面并更改 Z-index 以便这些元素不再重叠在我的 menu-wrapper 顶部时,gif 没有不再工作(第二个例子)。

第一个例子:

$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
.grille{
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
}
.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}
.vignette_horizontale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.description{
height: 35px;
padding-top: 14px;
font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="gif.js"></script>
<body>
<div id="contenant">
<div class="grille">
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
</div>
</body>

第二个例子(已编辑):

在第二个例子中,代码片段版本工作正常但在 my Website page 中不行...

我认为是通过更改 Z-index 值,它不再起作用了,但我真的找不到是否真的如此。

$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #fff;
}
h1 {
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

.header_down{
height: 120px;
position: fixed;
width: 100%;
background: #000;
top: 0;
z-index: 104;
transition: all 300ms ease-in-out;
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
height: auto;
z-index: 40;
}
.espacehaut{
height: 120px;
z-index: 1;
}

.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}

.hover_vignettes{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#FF0000;
background-blend-mode: difference;
}

.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}

.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}

.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}

.hover_vignettes_vertical{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}


.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}


.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}


.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}


.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}

.vignette_horizontale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

.vignette_verticale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width: 30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
@keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
@-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
@keyframes scale{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}
@-webkit-keyframes breakeranimate{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}

.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}


.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="all">
<div class="cursor"></div>
<!--loader-->
<!-- <div id="loader">
<img src="src/img/logo.png">
</div> -->
<!--chargement-->
<div id="breaker"> </div>
<div id="breaker-two"> </div>
<!--Navigation- ouverture-->
<div id="navigation-content">
<div class="logo">
<h1>
<a id="name">lookitsgraphic</a>
</h1>
</div>
<div class="navigation-close">
<span class="close-first"></span>
<span class="close-second"></span>
</div>
<div class="navigation-links">
<a href="javascript:setTimeout(()=>{window.location = 'index.html' },800);" data-text="HOME" id="home-link" >HOME</a>
<a href="javascript:setTimeout(()=>{window.location = 'aboutMe.html' },800);" data-text="ABOUT" id="about-link" >ABOUT</a>
<a href="javascript:setTimeout(()=>{window.location = 'projects.html' },800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
<a href="javascript:setTimeout(()=>{window.location = 'portfolio.html' },800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
<a href="javascript:setTimeout(()=>{window.location = 'contact.html' },800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
</div>
</div>
<header class="header_down">
<!--div-->
<h1><a class="logoInit" alt="logo">lookitsgraphic</a>
</h1>
<div class="social-media-links">
<a href="#/" target="_blank">
<img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
</a>
<a href="Tel: #">
<img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
</a>
<a href="mailto: #" target="_top">
<img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
</a>
<a href="#">
<img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
</a>
</div>
<div class="menubar">
<span class="first-span"></span>
<span class="second-span"></span>
<span class="third-span"></span>
</div>
<!--Header Fin-->
</header>

<!--GRILLE-->
<div class="grille">
<div class= "espacehaut"> </div>
<div class="colonne1">

<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>

</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>


</div>

<div class="colonne2">

<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">

</div>
</a>

<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>





</div>

<div class="colonne3">

<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>

<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>



</div>
</div>
<!--ALL Fin-->
</div>

<!--Scripts-->
</div>

</body>

My Website page带有不起作用的 gif。

如果有人知道在哪里可以解决这个问题。

感谢您对此事的考虑。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com