带有onclick的CSS3过渡效果

CSS3 transition effect with onclick

本文关键字：过渡效果 CSS3 onclick 带有      更新时间：2023-09-26

我正在努力完成CSS3，有点陷入了一个问题。

问题如下：

我有一张最初位于屏幕左侧的图像：

.box img{
margin-left:0;
-webkit-transition:1s;
 }

现在，在悬停时，当我想要效果发生时，即当我悬停在图像上时，将图像从左移动500px，代码如下：

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

这简直太完美了。唯一的问题是，当我点击图像时，我希望获得相同的效果。也就是说，我希望图像在点击后向左移动500像素，并保持在那里。当我再次点击图像时，它应该会移回原来的位置。

我该怎么做，请解释我！！！！

您可以使用几乎相同的方法，只需使用JS/jQuery添加/删除一个具有悬停状态等所有规则的类。

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

更新

以下是一个示例：http://jsfiddle.net/Te9T5/悬停状态被删除，因为当你让悬停和点击都做同样的事情时，它看起来不太好，因为你需要悬停一些东西才能点击它。

使用JavaScript，也许您可以做这样的事情？基本上，我在示例中所做的是在单击图像时更改margin-left属性，并根据其位置添加margin-left: 500px;或margin-left: 0;

注意，我已经向img标记添加了一个id，这是为了能够使用document.getElementById访问/更改图像的margin-left属性。

这是演示

HTML

<div class="box">
    <img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>

CSS（添加了不固定的转换）

.box img {
    margin-left:0;
    -webkit-transition: 1s;
            transition: 1s;
}

JS

(function () {
    var move = document.getElementById('move');
    move.onclick = function () {
        if (move.style.marginLeft === "500px") {
            move.style.marginLeft = "0";
        } else {
            move.style.marginLeft = "500px";
        }
    };
})();

如果你只想继续使用css伪类，那么你可以把你的img标签包装在一个不指向任何地方的a标签中，给你完整的锚伪类堆栈

对于这样的东西：

<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>

然后，您可以通过:activepsuedo类访问带有css的点击：

.box .img_wrapper img {..}
.box .img_wrapper:hover img {..}
.box .img_wrapper:active img {..}

此处提供完整参考：http://www.w3schools.com/css/css_pseudo_classes.asp

原来css有一个：target伪选择器，可以使用看看这个http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

相关文章：