在开始时我不得不说我是编码的纯新手（特别是在JS和jQuery中），我有一个问题，我几天都无法解决。 我想创建将根据滚动位置动画的序列动画。我在网上找到了 ---＆gt;的代码。这个 https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/ ＆lt; - 事情是我有一个很大的问题要把它们放在一边......
我希望在页面的右侧（div称为“右”）有这个可乱的动画，但每当我这样做时，动画都没有运行......
下面你可以看到我的代码。
非常乐意听到你们的帮助！
$(document).ready(function() {
$(document).mousemove(function(e) {
$('.project1').offset({
left: e.pageX + 20,
top: e.pageY + 20
});
});
$(".numero1").hover(function () {
$('.project1').css({opacity : 1.0});
},
function () {
$('.project1').css({opacity : 0.0});
}
);
});body {
background-color:#ffffff;
font:300 Arial, sans-serif;
top:0px;
margin: 0;
padding: 0;
cursor: url('./img/dot1.ico'), auto;
overflow:hidden;
}
*{
border:none;
}
a{
text-decoration:none;
}
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: black;
}
a:hover{
color: black;
font-family: Arial;
font-style:italic;
}
.left a{
color: black;
font-family: Arial;
font-style: italic;
}
.left a:hover{
color: black;
font-family: Arial;
font-style: normal;
}
li {
list-style-type: none;
}
#container {
display: flex;
overflow: hidden;
height: 100vh;
padding-top: 100px;
position: fixed;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left,
.middle,
.right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left::-webkit-scrollbar,
.middle::-webkit-scrollbar,
.right::-webkit-scrollbar {
display: none;
}
.left {
top: 15px;
font:300 45px Arial, sans-serif, white;
font-style: normal;
line-height: 1em;
color: white;
width: 2.7%;
margin-left: 0px;
padding-left: 15px;
margin-top: -100px;
background-color: white; /* Old browsers */
/* background: -moz-linear-gradient(top, #ffb2b2 0%, #849fff 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top, #ffb2b2 0%,#849fff 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #ffb2b2 0%,#849fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#849fff',GradientType=0 ); /* IE6-9 */
border-right: 0.5px solid black;
}
.middle {
width: 28%;
padding: 10 10 0 0;
margin-top: -110px;
margin-bottom: 100px;
background-color: white;
border-right: 0.5px solid black;
}
.projects img{
width: 100%;
}
.right {
flex: 1;
padding: 0 0 0 0;
margin-top: -100px;
margin-bottom: 100px;
font: Arial, sans-serif;
background-color: white ;
font-size: 0px;
color: black;
}
.right img{
width: 100%;
}
.gallery {
margin-top: 0px;
}
.projects {
position: relative;
margin-top: 5px;
height: 70px;
padding-bottom: 50px;
font:300 22px Arial, sans-serif;
color: black;
cursor: url('./img/dot.ico'), pointer;
border-bottom: 0.5px solid black;
}
#container figure {
background: black;
margin: 0px;
line-height: 0px;
}
#container figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#container figure:hover img {
opacity: 0;
}
table .numero1{
width: 100%;
text-align: left;
}
table .numero2{
width: 100%;
text-align: left;
}
table .numero3{
margin-top: 0px;
width: 100%;
text-align: left;
}
table .numero4{
margin-top: 0px;
width: 100%;
text-align: left;
}
.numero {
padding-right: 1%;
margin-top: -5px;
width:5%;
font-size: 33px;
/* -webkit-text-stroke: 0.5px black;*/
}
.title {
padding-left: 3%;
width: 40%;
padding-right: 1%;
}
.type {
width: 30%;
padding-left: 10%;
}
.year {
width: 5%;
padding-left: 1%;
}
.project1 {
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
opacity: 0;
height: 150px;
}<!DOCTYPE HTML>
<html>
<head>
<title>Name</title>
<meta charset="utf-8" />
<link rel="icon" href="./img/sm.png" type="image/gif" />
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="responsiveslides.min.js"></script>
</head>
<body>
<div id="container">
<div class="left">
<a style="cursor: url('./img/dot.ico'), pointer;" href="index.html">N<br>A<br>M<br>E</a>
</div>
<div class="middle">
<div class="gallery">
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<div class="right">
</div>
</div>
</body>