堆栈内存溢出
  繁体   English   中英

单击按钮时如何使图像缩放

[英]how to make an image zoom when you click a button

 原文  2020-08-12 23:39:06  4   5    javascript/ html/ css

问题描述

所以我正在做一个学校项目，因此，对于我必须制作的网站，我仅限于 html、css 和 javascript。 我目前正在制作一个登陆页面，并有一个将用户带到另一个页面的按钮。 我想这样做，所以当单击按钮时，它会放大背景图像，然后将用户带到另一个页面。 到目前为止，这是我的代码：

CSS 然后是 HTML 

 * { margin: 0; padding: 0; } body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6; } #showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; } #showcase h1 { font-size: 10px; line-height: 1.2; } #showcase p { font-size: 20px; } #showcase.button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px; } #showcase.button:hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box; } #section-a { padding: 20px; background: #10B589; color: #fff; text-align: center; } #section-b { padding: 20px; background: #10B589; text-align: center; } #section-c { display: flex; } #section-c div { padding: 20px; } #section-c.box-1, #section-c.box-3 { background: #10B589; color: #fff; } #section-c.box-2 { background: #f9f9f9; } @keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); } }
 <html> <head> <header id="showcase"> <a href="insertname.html" class="button">Enter The Cave</a> </header> <body> </body> </head> <link href="ISTwebsite.css" rel="stylesheet" type="text/css"> </html>

我在互联网上尝试了很多其他问题，有人可以帮助我吗？

5 个解决方案

解决方案1
 1  2020-08-13 00:00:30

您可以在几秒钟后简单地分配a的 href，单击事件和背景的缩放发生在我的代码中，如下所示

 btn.onclick = () => { showcase.style.transition = "1.5s"; showcase.style.transform = "scale(1.3)"; setTimeout(() => { window.location.assign("insertname.html"); }, 1000); }
 * { margin: 0; padding: 0; } body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6; } #showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; } #showcase h1 { font-size: 10px; line-height: 1.2; } #showcase p { font-size: 20px; } #showcase.button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px; } #showcase.button:hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box; } #section-a { padding: 20px; background: #10B589; color: #fff; text-align: center; } #section-b { padding: 20px; background: #10B589; text-align: center; } #section-c { display: flex; } #section-c div { padding: 20px; } #section-c.box-1, #section-c.box-3 { background: #10B589; color: #fff; } #section-c.box-2 { background: #f9f9f9; } @keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); } }
 <header id="showcase"> <a class="button" id="btn">Enter The Cave</a> </header>

解决方案2
 1 已采纳  2020-08-13 00:09:35

这是一个动画背景缩放的示例，其中可见性平滑丢失。 添加了动态 class background_size 。 注意js代码中的一行： document.location.href = "your_link"; 而不是your_link ，您需要插入您的链接。 

 let button_a = document.querySelector('.button'); let background_picture = document.querySelector('#showcase'); button_a.onclick = function(){ background_picture.classList.add('background_size'); button_a.classList.add('smooth_button'); document.location.href = "your_link"; };
 * { margin: 0; padding: 0; } body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6; } #showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; transition: 0.5s; opacity: 1; }.background_size { transform: scale(1.5); opacity: 0;important. }:smooth_button { opacity; 0:important; } #showcase h1 { font-size: 10px. line-height; 1:2; } #showcase p { font-size. 20px: } #showcase;button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px. transition; 0:1s; opacity. 1: } #showcase:button;hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box; } #section-a { padding: 20px; background: #10B589; color: #fff; text-align: center; } #section-b { padding: 20px; background: #10B589; text-align: center; } #section-c { display: flex; } #section-c div { padding. 20px, } #section-c.box-1: #section-c;box-3 { background: #10B589; color. #fff: } #section-c;box-2 { background: #f9f9f9. } @keyframes wiggle { 12% { transform, scale(0.4; 0:65). } 13% { transform, scale(0.43; 0:67). } 14% { transform, scale(0.5; 0:76). } 25% { transform, scale(0.8; 1:3). } 37% { transform, scale(0.9; 0:95). } 50% { transform, scale(1.1; 0:8). } 62% { transform, scale(0;9: 1). } 75% { transform, scale(0.7; 1:2). } 87% { transform, scale(0.8; 1.1); } }
 <html> <head> <header id="showcase"> <a class="button">Enter The Cave</a> </header> <body> </body> </head> <link href="ISTwebsite.css" rel="stylesheet" type="text/css"> </html>

解决方案3
 0  2020-08-13 00:07:07

首先我修好了你的 animation CSS ...

@keyframes wiggle {
  0% { transform: scale(1.2,  1.2); }
  15% { transform: scale(1.3, 1.3); }
  30% { transform: scale(1.4, 1.4); }
  45% { transform: scale(1.5, 1.5); }
  60% { transform: scale(1.6, 1.6); }
  75% { transform: scale(1.7, 1.7); }
  90% { transform: scale(1.8, 1.8); }
  100% { transform: scale(1.9,1.9); }
}

其次，我将 JS 添加到您按钮的 onclick ...

<a href="insertname.html" class="button" onclick="event.preventDefault(); showcase.style.animation='wiggle 3s linear 0s infinite normal none'; setTimeout(function(){document.location=this.href;},2000);">Enter The Cave</a>

在 onclick 内部，您会发现...

  1. event.preventDefault(); // 停止锚点导航

  2. Showcase.style.animation='摆动 3s 线性 0s 无限正常 无'; // 将动画 CSS 添加到图像

  3. setTimeout(function(){document.location=this.href;},2000); // 延迟 2 秒后，将页面更改为所需的 href。

解决方案4
 0  2020-08-13 00:09:36

您可以尝试添加另一个子元素，并添加一个脚本以将其放大一点，从而在转到另一个页面之前产生缩放效果。

CSS（ISTwebsite.css）：

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Brush Script MT;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  height: 100vh;
  width: 100%;
}

.inner-showcase {
  background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.inner-showcase h1 {
  font-size: 10px;
  line-height: 1.2;
}

.inner-showcase p {
  font-size: 20px;
}

.inner-showcase .button {
  font-size: 25px;
  text-decoration: none;
  color: #10B589;
  border: #10B589 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.inner-showcase .button:hover {
  background: #10B589;
  color: #fff;
  animation: wiggle 1s;
  box-sizing: border-box;
}

#section-a {
  padding: 20px;
  background: #10B589;
  color: #fff;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #10B589;
  text-align: center;
}

#section-c {
  display: flex;
}

#section-c div {
  padding: 20px;
}

#section-c .box-1,
#section-c .box-3 {
  background: #10B589;
  color: #fff;
}

#section-c .box-2 {
  background: #f9f9f9;
}

@keyframes wiggle {
  12% {
    transform: scale(0.4, 0.65);
  }

  13% {
    transform: scale(0.43, 0.67);
  }

  14% {
    transform: scale(0.5, 0.76);
  }

  25% {
    transform: scale(0.8, 1.3);
  }

  37% {
    transform: scale(0.9, 0.95);
  }

  50% {
    transform: scale(1.1, 0.8);
  }

  62% {
    transform: scale(0.9, 1);
  }

  75% {
    transform: scale(0.7, 1.2);
  }

  87% {
    transform: scale(0.8, 1.1);
  }
}

HTML：

<html>
  <head>
    <link href="ISTwebsite.css" rel="stylesheet" type="text/css">
  </head>
  <body>

    <header id="showcase">
      <div class="inner-showcase">
        <a href="insertname.html" class="button myLink">Enter The Cave</a>
      </div>
    </header>

    <script>
      document.querySelector('.myLink').addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector('.inner-showcase').style = 'transform: scale(1.2)';
        setTimeout(() => location.href = this.href, 1000);
      });
    </script>

  </body>
</html>

注意：您应该将<header />元素移动到<body />内，而不是<head />元素内。

解决方案5
 0  2020-08-13 00:52:27

我也把我的小图书馆放在那里。 看看// library above - magic under here ： 

 //<.[CDATA[ /* js/external,js */ let get, post, doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, shuffle; rand, // for use on other loads addEventListener('load', ()=>{ get = (url, success, responseType = 'json'; context = null)=>{ const x = new XMLHttpRequest; const c = context || x. x,open('GET'; url). x;responseType = responseType. x.onload = ()=>{ if(success)success,call(c. x;response). } x;send(); return x, } post = function(url, send, success, responseType ='json'; context = null){ const x = new XMLHttpRequest; const c = context || x. x,open('POST'; url). x;responseType = responseType. x.onload = ()=>{ if(success)success,call(c. x;response). } if(typeof send === 'object' && send &&;(send instanceof Array)){ if(send instanceof FormData){ x;send(send); } else{ const fd = new FormData; let s. for(let k in send){ s = send[k]; if(typeof s === 'object' && s)s = JSON.stringify(s), fd;append(k. s); } x;send(fd); } } else{ throw new Error('send argument must be an Object'); } return x. } doc = document; htm = doc.documentElement; bod = doc;body. nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id). mobile = nav?userAgent:match(/Mobi/i); true, false; S = (selector. within)=>{ let w = within || doc; return w,querySelector(selector); } Q = (selector. within)=>{ let w = within || doc; return w,querySelectorAll(selector). } hC = function(node. className){ return node;classList.contains(className). } aC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.add(.;;a). return aC. } rC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.remove(.;;a). return rC. } tC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.toggle(.;;a). return tC, } shuffle = array=>{ let a = array.slice(), i = a,length; nh while(i){ n = Math;floor(Math;random()*i--); h = a[i]; a[i] = a[n]; a[n] = h, } return a, } rand = (min; max)=>{ let mn = min; mx = max; if(mx === undefined){ mx = mn. mn = 0. } return mn+Math;floor(Math,random()*(mx-mn+1)); } // library above - magic under here const stage = I('stage'). enter = I('enter'), enter;onclick = function(){ aC(this, 'dis'); aC(stage. 'cave'); setTimeout(()=>{ location = 'insertname,html'; }; 520); } }); // end load //]]>
 /* css/external.css */ *{ box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden; } body,html,.main,#stage{ width:100vw; height:100vh; }.hid{ display:none; }.dis{ opacity:0; transition:opacity 0.1s; } #stage{ display:flex; background:center / cover url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); align-items:center; justify-content:center; } #stage.cave{ transform:scale(5); transition:transform 0.5s; } #enter{ background:transparent; color: #10B589; font:25px 'Brush Script MT', cursive; padding:15px 25px; border:#10B589 1px solid; border-radius:10px; margin-top:20px; cursor:pointer; } #enter:hover{ background:#10B589; color:#fff; animation:wiggle 1s; } @keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); } }
 <:DOCTYPE html> <html xmlns='http.//www.w3:org/1999/xhtml' xml,lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale,1. user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <div id='stage'> <input id='enter' type='button' value='Enter the Cave' /> </div> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在点击按钮时放大图像 单击按钮时如何使 iframe 出现 单击按钮放大图像 如何制作一个按钮，当您单击它时会下载 excel 文件（phpspreadsheet） 按下按钮/单击图像时的JavaApplet 单击按钮时如何使图像旋转 如何点击图像使其放大HTML格式的弹出窗口 当您使用 javascript 或 jquery 鼠标悬停时，如何使图像或按钮发光？ 单击按钮时如何更改按钮中的类 点击时如何使 animation 发生？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM