Question

我正在创建一个网站，并尝试在点击按钮时将网站缩放到背景图像的不同元素。我能够使用它来缩放到一个奇点：悬停虽然无法找到让HTML按钮触发多个自定义状态的方法，例如：hover，：active＆amp; ：专注于style.css

这是我的代码：

<a href="#" onclick="style.site='state1';">1</a>
<a href="#" onclick="style.site='state2';">2</a>
<a href="#" onclick="style.site='state3';">3</a>

            .site {
                background-image: url(images/Background.jpg);
                background-size: 100%;
                max-width: auto;
                position: relative;
                transition-property:all;
                transition-duration:5s;
            }
            .site:State1{
                transform-origin: 80%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State2{
                transform-origin: 20%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State3{
                transform-origin: 50%  60%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }

有可能这样做吗？或者有类似的东西？

Answer 1

你可以用一个简单的功能来做到这一点：

HTML：

<a href="#" onclick="switchState();">Text</a>

Javascript：

function switchState() {
    var elements = document.getElementsByClassName("site");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.transform = "scale(10)";
        elements[i].style.transformOrigin = "50% 60%";     
        elements[i].style.animationTimingFunction = "ease-in";   
}

或者如果你正在使用jQuery：

function switchState() {
        $(".site").css({
            "transform-origin": "50% 60%",
            "transform": "scale(10)",
            "animation-timing-function": "ease-in",
        });       
    }

如果您将css属性作为参数传递，则不需要对它们进行硬编码。

具有按钮触发器的元素的CSS多个状态

1 个答案: