Javascript 使用 JS/Jquery 翻转图像

Flipping an image with JS/Jquery

提问by Glenn

I am looking to flip an image. I have gotten the css to work using:

我正在寻找翻转图像。我已经让 css 使用：

    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";

I am looking to apply this to an image but am unsure of the formatting.

我希望将其应用于图像，但不确定格式。

I tried doing: var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";

我试着做： var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";

And then: $("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');at a later point, but it doesn't seem to apply.

然后： $("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');稍后，但它似乎不适用。

回答by marbor3

Are you trying do to something like this?

你在尝试做这样的事情吗？

$('#image').mouseover(function(){
    $(this).addClass('flipped');
}).mouseleave(function(){
    $(this).removeClass('flipped');
});

the css:

css：

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

jsFiddle here

jsFiddle在这里

回答by adeneo

I'd just use a class, like so:

我只是使用一个类，如下所示：

.flipped {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

Then just swap the class:

然后只需交换类：

$("#chicken").delay(2000).fadeOut(1, function() {
    $(this).addClass('flipped').show()
           .animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});

FIDDLE

小提琴

回答by ChaseMoskal

I'm not completely sure I understand what you're looking for.

我不完全确定我明白你在找什么。

I'm thinking perhaps it can be done without any JavaScript at all? If you're looking to flip along the X axis, with some animation?

我在想也许它可以在没有任何 JavaScript 的情况下完成？如果您想沿 X 轴翻转并带有一些动画？

Flipping Image on Hover

悬停时翻转图像

JSFiddle: Image Flip on :hover

JSFiddle：图像翻转：悬停

For this demo, I had to place the image HTML into a wrapper <div>, because otherwise the :hoverand the scale()changes conflict with one another in funky ways. You'll understand if you remove the wrapper <div>.

对于这个演示，我不得不将图像 HTML 放入一个包装器中<div>，因为否则:hover和scale()更改会以时髦的方式相互冲突。如果您删除 wrapper ，您就会明白<div>。

HTML

HTML

<div class="flippy">
    <img src="http://lorempixel.com/200/200/"/>
</div>

CSS:

CSS：

.flippy>img {
    /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
    transform:scale(1,1);
    /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
    transition:all 600ms ease; }

    .flippy:hover>img {
        /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
        transform:scale(-1,1); }

If you need to control it with JavaScript, it should be easy enough to replace the :hoverwith another class, like .flipped, then do as you please in JS to activate it's flip state on and off.

如果你需要用 JavaScript 控制它，:hover用另一个类替换它应该很容易，比如.flipped，然后在 JS 中随心所欲地打开和关闭它的翻转状态。

//Chase.

//追赶。

Flipping Image on Attribute (click-based demo)

在属性上翻转图像（基于点击的演示）

jsFiddle: Image Flip on Attribute

jsFiddle：属性上的图像翻转

In this demo, the image flips when is has the flippedattribute set.

在这个演示中，图像在flipped设置了属性时翻转。

JavaScript:

JavaScript：

// Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
    if ($(this).attr('flipped'))
        $(this).removeAttr('flipped');
    else $(this).attr('flipped','flipped');
});

CSS:

CSS：

/* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
    transform:scale(1,1);
    transition:all 600ms ease; }

    .flippy[flipped] {
        transform:scale(-1,1); }

HTML:<img class="flippy" src="http://lorempixel.com/200/200/"/>-- as you can see, we no longer need the <div>wrapper for this example, as the :hover conflicts are no longer an issue.

HTML:<img class="flippy" src="http://lorempixel.com/200/200/"/>-- 如您所见，我们不再需要<div>此示例的包装器，因为 :hover 冲突不再是问题。

//Chase.

//追赶。

回答by Aaron Jones

<style type="text/css">
    .transform-image {     
        -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
</style>
<script type="text/javascript">
  $("#chicken").hover(function(){
           $(this).addClass("transform-image") },   
     function () {
           $(this).removeClass("transform-image");
         };
})
</script>