javascript - 单击图像后如何使CSS动画发生
问题描述
我正在尝试使用 CSS 动画来移动图像,但是在我点击它们之后。目前,一旦我进入页面,它们就会移动。我希望当您单击任何图像时,都会发生 CSS 动画。我相信您必须使用一些 javascript 代码来做到这一点,但我不知道该怎么做。我是编程新手,我希望能得到任何帮助。让我知道你们是否需要更多信息。谢谢
var doineedtowait = 0;
function myFunction(imgs) {
if(doineedtowait == 0){
sleep(1000);
}
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
var imgParagraph = document.getElementById('img-paragraph');
imgParagraph.innerHTML = imgs.getAttribute("yeep");
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
doineedtowait++; //after executing we update the doineedtowait to +1
//so the if with sleep for 1 second will not be used anymore
}
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody {
background-color: #EEF0FC;
height: 5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
width: 40%;
padding-top:20px;
padding-left:20px;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 400px;
width: 50%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 7px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 80px;
}
.yeep1 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.yeep2 {
color: purple;
}
.yeep3 {
color: green;
}
.yeep4 {
color: blue;
}
.yeep1::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
#column1 {
position: relative;
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column2 {
position: relative;
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column3 {
position: relative;
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column4 {
position: relative;
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<script src='../Javascript/movement.js'></script>
<script src='../Javascript/jquery-3.5.1.min.js'></script>
<title>Projects</title>
</head>
<body class='totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph"></p>
</div>
</div>
<div class="row">
<div class="column" id='column1'>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" yeep="<p class='yeep1'> Parapraph #1 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column2'>
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" yeep="<p class='yeep2'> Parapraph #2 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column3'>
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" yeep="<p class='yeep3'> Parapraph #3 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column4'>
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" yeep="<p class='yeep4'> Parapraph #4 </p>" onclick="myFunction(this);">
</div>
</div>
</body>
</html>
解决方案
您可以在使用 JavaScript 单击图像时触发动画,方法是更改要设置动画的项目的 CSS 类:
function testFunction() {
document.getElementById('img').classList.add('animation');
}
a {
display: flex;
align-items: center;
justify-content: center;
}
.animation {
animation: animation 1s linear infinite;
}
@keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
100% {
transform: scale(1);
}
}
<a href="#" onclick="testFunction()">
<img id="img" src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" alt="" />
</a>
那应该将动画添加到您的元素中。如果要在单击时切换动画,只需将classList.add('animation');
更改为classList.toggle('animation');
. 我希望这有帮助。
推荐阅读
- android - 如何将完整的 android 项目转换为 Cordova 插件?
- ruby - 使用不同的控制器重定向到嵌套路由
- cuda - 在 Ubuntu 上安装多个 CUDA/cuDNN 版本的最佳解决方案
- java - Google Gmail API 的最新 JAVA 库和依赖项是什么/在哪里?
- android - 有没有办法让长文本适合小部件?
- php-7 - 谷歌驱动 API 访问
- swift - 如何显示用户名
- python - 在 docker 上运行时 Python 烧瓶重新加载器“Errno 2 No such file or directory”错误
- excel - 宏 VBA 代码在独立运行时运行良好,但在与其他宏在字符串中运行时会损坏
- python - 如何使用 tkinter 显示函数调用的输出?