使用 CSS 放大和缩小鼠标单击

Question

提问by iwsnmw

I want to zoom image with only CSS. The code below zooms the image when the left button of the mouse is kept pressed but I want to zoom in and out with a mouse click. How can I achieve that?

我想只用 CSS 缩放图像。下面的代码在按住鼠标左键时缩放图像，但我想通过单击鼠标来放大和缩小。我怎样才能做到这一点？

.container img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.container img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}

Answer 1

回答by Nhan

Let's use a trick here, an input checkbox:

让我们在这里使用一个技巧，一个输入复选框：

input[type=checkbox] {
  display: none;
}

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>

Answer 2

回答by zer00ne

4 Ways to Add Click Eventswith Only CSS Pseudo-Selectors

仅使用 CSS 伪选择器添加点击事件的4 种方法

Note:I'll be using the word targetwhen referring to the element we want to manipulate and triggeras the element we are using to manipulate target.

注意：当将我们想要操作和触发的元素作为我们用来操作target的元素时，我将使用target一词。

:checked

:检查

Use checkboxes or radios and :checkedto determine or cause a target'sstate and/or to take action.

使用复选框或收音机:checked来确定或导致目标的状态和/或采取行动。

Trigger

扳机

<label>
<input type="checkbox">
 <!--or--> 
<input type="radio">

Conditions

状况

Requires that the targetmust be:
- A sibling that follows the triggeror...
- ...a descendant of the trigger.

要求目标必须是：
- 跟随触发器的兄弟姐妹或...
- ...触发器的后代。

Note

笔记

Hide the actual <checkbox>with display:none
Ensure that the <checkbox>has an idand that the <label>has a forattribute with a value matching the idof the <checkbox>
This is dependant upon the targetbeing a sibling that follows the triggeror the targetas a descendant. Therefore be aware that you'll most likely use these selector combinators: ~, +, >.

隐藏实际<checkbox>使用display:none
确保<checkbox>具有id和该<label>具有for与相匹配的一个值属性id的<checkbox>
这取决于目标是跟随触发器的兄弟或目标作为后代。因此请注意，您很可能会使用这些选择器组合器：~, +, >。

HTML

<label for='chx'>CHX</label>
<input id='chx' type="checkbox">

<div>TARGET</div>

CSS

#chx:checked + div {...

:target

：目标

Use an <a>nchor and apply the :targetpseudo-selector on the target element.

使用<a>nchor 并:target在目标元素上应用伪选择器。

Trigger

扳机

<a href=""></a>

Conditions

状况

Assign an idto the target.
Assign that same idto the <a>hrefattribute preceding with a hash #

id为目标分配一个。
将相同的值分配id给<a>href前面带有哈希值的属性#

HTML

<a href='#target'>A</a>

<div id='target'>TARGET</div>

CSS

#target:target {...

:focus

：重点

The triggerelement must be either an <input>type orhave the attribute tabindexin order to use :focus.

所述触发元件必须是一个<input>类型或具有属性tabindex以便使用:focus。

Trigger

扳机

<div tabindex='0'>ANY INPUT OR USE TABINDEX</div>

Conditions

状况

Targetmust a sibling that is located after the triggeror *target must be a descendant of the trigger.
State or effect will persist until user clicks elsewhere thereafter a bluror unfocusevent will occur.

Target必须是位于触发器之后的同级，或者 *target 必须是触发器的后代。
状态或效果将持续到用户点击其他地方，此后blur或unfocus事件将发生。

HTML

<nav tabindex='0'>
  <a href='#/'>TARGET</a>
  <a href='#/'>TARGET</a>
  <a href='#/'>TARGET</a>
</nav>

CSS

 nav:focus ~ a {...

:active

：积极的

This is a hack that cleverly exploits the transition-delayproperty in order to actually have a persistent state achieved with no script.

这是一个巧妙地利用该transition-delay属性的黑客，以便在没有脚本的情况下实际实现持久状态。

Trigger

扳机

<a href='#/'>A</a>

Conditions

状况

Targetmust a sibling that is located after the triggeror *target must be a descendant of the trigger.
There must be a transitionassigned to the targettwice.
- The first one to represent the persistent state.
- The second one to represent the normal state.

Target必须是位于触发器之后的同级，或者 *target 必须是触发器的后代。
必须有一个transition分配给目标两次。
- 第一个代表持久状态。
- 第二个代表正常状态。

HTML

<a href="#/">A</a>

<div class='target'>TARGET</div>

CSS

.target {
    opacity: 1;
    transition: all 0s 9999999s;
 }

 a:active ~ .target {
     opacity: 0;
     transition: all 0s;
 }

Wacked looking, right? I'll try to explain it, but you're better off reading this article.

看起来很古怪，对吧？我会试着解释它，但你最好阅读这篇文章。

Under normal circumstances, if your triggerhad the :activepseudo-selector, we are able to manipulate the targetupon keydown. That means our active state is actually active as long as you keep your finger on the button...that's crappy and useless, I mean what are you expected to do to make .activeto be useful? Maybe a paperweight and some rubber bands to keep a steady and persistent pressure on the button?

在正常情况下，如果你的触发器有:active伪选择器，我们就可以在keydown 时操纵目标。这意味着只要您将手指放在按钮上，我们的活动状态实际上就是活动的……这很糟糕而且没用，我的意思是您希望做什么才能有用？也许镇纸和一些橡皮筋来保持按钮上的稳定和持久的压力？.active

We will leave .activethe way it is: lame and useless. Instead:

我们将保持现状.active：跛脚和无用。反而：

Make a ruleset for targetunder normal circumstances. In the example above it's opacity:1.
Next we add a transition:...ok then... allwhich works, next is 0s...ok so this transitionisn't going to be seen it's duration is 0 seconds, and finally... 9999999s...116 days delay? We'll come back to that, we will continue onto the next rulesets...
These rulesets declare what happens to targetunder the influence of trigger:active. As you can see that it just does what it normally does, which is onkeydown targetwill become invisible in 0 seconds. Now once the user keys up, targetis visible again...no *target's * new state of opacity:0is persistent! No paperweight, technology has come a long way.
The targetis still actually going to revert back to it's normal state, because :activeis too lazy and feeble to work without rubber bands and paperweights. The persistent state is perceived and not real because targetis still leaving the state brought on by :activewhich will be about 116 days before that will happen. ;)

在正常情况下为目标制定规则集。在上面的例子中，它是opacity:1.
接下来我们添加一个transition:...ok then...all有效，接下来是0s...ok 所以这个过渡不会被看到，它的持续时间是 0 秒，最后... 9999999s...延迟 116 天？我们会回到那个，我们将继续下一个规则集......
这些规则集声明在trigger:active的影响下目标会发生什么。正如你所看到的，它只是做它通常做的事情，即 onkeydown目标将在 0 秒内变得不可见。现在一旦用户按键，目标再次可见......没有*目标的 * 新状态是持久的！没有镇纸，技术已经走过了漫长的道路。 opacity:0
该目标仍然是实际上将恢复到它的正常状态，因为:active懒得和虚弱工作没有橡皮筋和镇纸。持久状态是感知的而不是真实的，因为目标仍在离开所带来的状态，:active这将在大约 116 天之前发生。;)

This Snippet features the 4 ways previously mentioned. I'm aware that the OP requested zoom (which is featured therein), but thought it would be to repetitive and boring, so I added different effects as well as zooming.

此代码段具有前面提到的 4 种方式。我知道 OP 要求缩放（其中有特色），但认为它会重复和无聊，所以我添加了不同的效果以及缩放。

SNIPPET

片段

a {
  text-decoration: none;
  padding: 5px 10px;
  border:1px solid red;
  margin: 10px 0;
  display: inline-block;
}
label {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid blue;
  margin: 10px 0;
  display:inline-block;
}
button {
  cursor:pointer;
  padding: 5px 10px;
  border: grey;
  font:inherit;
  display:inline-block;
}
img#img {
  width: 384px;
  height: 384px;
  display: block;
  object-fit: contain;
  margin: 10px auto;
  transition: width 3s height 3s ease-in;
  opacity: 1;
  transition: opacity 1s 99999999s;
}
#zoomIn,
#zoomOut,
#spin {
  display: none;
  padding: 0 5px;
}
#zoomOut:checked + img#img {
  width: 128px;
  height: 128px;
  transition: all 3s ease-out;
}
#zoomIn:checked + img#img {
  width: 512px;
  height: 512px;
  transition: all 3s ease-in-out;
}
  
#spin:checked ~ img#img {
  transform: rotate(1440deg);
}
img#img:target {
  box-shadow: 0px 8px 6px 3px rgba(50, 50, 50, 0.75);
}
a.out:focus ~ img#img {
  opacity: 0;
  transition: opacity 1s;
}
a.in:active ~ img#img {
  opacity: 1;
  transition: opacity 1s;
}
.grey:focus ~ img#img {
  filter: grayscale(100%);
}

<a href='#/' class='out'>FadeouT</a><a href='#/' class='in'>FadeiN</a>

<a href='#img'>ShadoW</a>

<br/><button class='grey' tabindex='0'>GreyscalE</button><br/>

<label for='spin'>SpiN</label>
<input type='checkbox' id='spin'>

<label for='zoomIn'>ZoomiN</label>
<input type='radio' id='zoomIn' name='zoom'>

<label for='zoomOut'>ZoomouT</label>
<input type='radio' id='zoomOut' name='zoom'>

<img id='img' src='https://i.ibb.co/5LPXSfn/Lenna-test-image.png'>

Answer 3

回答by Lawrence Cherone

Building on @Nhan answer: https://stackoverflow.com/a/39859268/661872

基于@Nhan 的回答：https://stackoverflow.com/a/39859268/661872

Shorter, scoped and does not require tracking ids for multiple elements.

更短、有范围且不需要跟踪多个元素的 ID。

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2);
  cursor: zoom-out
}

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://placehold.it/200">
  </label>
</div>

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://placehold.it/200">
  </label>
</div>

Answer 4

回答by Gajal Chouhan

    <html>
   <head>
      <title>Image Zoom</title>
      <style type="text/css">
         #imagediv {
         margin:0 auto;
         height:400px;
         width:400px;
         overflow:hidden;
         }
         img {
         position: relative;
         left: 50%;
         top: 50%;
         }
      </style>
   </head>
   <body>
      <input type="button" value ="-" onclick="zoom(0.9)"/>
      <input type="button" value ="+" onclick="zoom(1.1)"/>
      <div id="imagediv">
         <img id="pic" src=""/>
      </div>
      <script type="text/javascript" language="javascript">
         window.onload = function(){zoom(1)}
         function zoom(zm) {
             img=document.getElementById("pic")
             wid=img.width
             ht=img.height
             img.style.width=(wid*zm)+"px"
             img.style.height=(ht*zm)+"px"
             img.style.marginLeft = -(img.width/2) + "px";
             img.style.marginTop = -(img.height/2) + "px";
         }
      </script>
   </body>
</html>

Answer 5

回答by bimlesh bimi

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>

使用 CSS 放大和缩小鼠标单击

提问by iwsnmw

回答by Nhan

回答by zer00ne

4 Ways to Add Click Eventswith Only CSS Pseudo-Selectors

仅使用 CSS 伪选择器添加点击事件的4 种方法

:checked

:检查

Trigger

扳机

Conditions

状况

Note

笔记

HTML

HTML

CSS

CSS

:target

：目标

Trigger

扳机

Conditions

状况

HTML

HTML

CSS

CSS

:focus

：重点

Trigger

扳机

Conditions

状况

HTML

HTML

CSS

CSS

:active

：积极的

Trigger

扳机

Conditions

状况

HTML

HTML

CSS

CSS

SNIPPET

片段

回答by Lawrence Cherone

回答by Gajal Chouhan

回答by bimlesh bimi

相关推荐

CSS 引导程序中的偏移量究竟是什么？

CSS Flex 项目超出其容器

CSS Flexbox：两个元素在 flex 方向上彼此重叠：row

CSS 如何更改引导程序原色？

相关推荐

最近更新

标签