Question

很抱歉，如果这一切都没有意义，而且我的格式很差（我非常新编码）。我正在尝试创建一个页面，其中我有一个图像，它每秒钟左右水平镜像。基本上，图像永远来回翻转。我能够让计时器工作，所以它每秒在两个图像之间切换，我也能够创建镜像，但我不知道如何在代码中的其他位置引用它。就像我不知道如何标记图像[1] =“theflippedimage”或其他东西。这是我到目前为止所做的：

<head>
    <script type="text/javascript">

        function nextImage(){
            x = (x === images.length - 1) ? 0 : x + 1;
            document.getElementById("img").src=images[x];
        }
        function previousImage() {
            x = (x <=0) ? images.length - 1: x - 1;
            document.getElementById("img").src=images[x];
        }
        function startTimer() {
            setInterval(nextImage,1000);
        }
        var images= [], x= -1;

         images[0]="http://www.honda-perf.net/images/thumbs/cat.jpg"

            <img style='border:0';
            transform:scale(-1,1); 
            -webkit-transform:scale(-1,1);
            -moz-transform:scale(-1,1);
            -o-transform:scale(-1,1);
            src="http://www.honda-perf.net/images/thumbs/cat.jpg/>;
    </script>
</head>

<body onload="startTimer()">
    <img id="img" src="http://www.honda-perf.net/images/thumbs/cat.jpg">
</body>

Answer 1

使用CSS动画可以相对容易地实现效果。

在你的html中，你的body元素包含一个id为06:53:44.417 [main] DEBUG i.n.u.i.l.InternalLoggerFactory - Using SLF4J as the default logging framework 06:53:44.421 [main] DEBUG i.n.c.MultithreadEventLoopGroup - -Dio.netty.eventLoopThreads: 16 06:53:44.432 [main] DEBUG i.n.util.internal.PlatformDependent0 - java.nio.Buffer.address: available 06:53:44.432 [main] DEBUG i.n.util.internal.PlatformDependent0 - sun.misc.Unsafe.theUnsafe: available 06:53:44.433 [main] DEBUG i.n.util.internal.PlatformDependent0 - sun.misc.Unsafe.copyMemory: available 06:53:44.433 [main] DEBUG i.n.util.internal.PlatformDependent0 - java.nio.Bits.unaligned: true 06:53:44.433 [main] DEBUG i.n.util.internal.PlatformDependent - Platform: Windows 06:53:44.434 [main] DEBUG i.n.util.internal.PlatformDependent - Java version: 8 06:53:44.434 [main] DEBUG i.n.util.internal.PlatformDependent - -Dio.netty.noUnsafe: false 06:53:44.434 [main] DEBUG i.n.util.internal.PlatformDependent - sun.misc.Unsafe: available 06:53:44.434 [main] DEBUG i.n.util.internal.PlatformDependent - -Dio.netty.noJavassist: false 06:53:44.435 [main] DEBUG i.n.util.internal.PlatformDependent - Javassist: unavailable 06:53:44.435 [main] DEBUG i.n.util.internal.PlatformDependent - You don't have Javassist in your class path or you don't have enough permission to load dynamically generated classes. Please check the configuration for better performance. 06:53:44.435 [main] DEBUG i.n.util.internal.PlatformDependent - -Dio.netty.tmpdir: C:\Users\smsgh\AppData\Local\Temp (java.io.tmpdir) 06:53:44.436 [main] DEBUG i.n.util.internal.PlatformDependent - -Dio.netty.bitMode: 64 (sun.arch.data.model) 06:53:44.436 [main] DEBUG i.n.util.internal.PlatformDependent - -Dio.netty.noPreferDirect: false 06:53:44.458 [main] DEBUG io.netty.channel.nio.NioEventLoop - -Dio.netty.noKeySetOptimization: false 06:53:44.459 [main] DEBUG io.netty.channel.nio.NioEventLoop - -Dio.netty.selectorAutoRebuildThreshold: 512 06:53:44.487 [main] INFO io.freeswitch.OutboundTest - Client connecting .. 06:53:44.517 [main] DEBUG i.n.util.internal.ThreadLocalRandom - -Dio.netty.initialSeedUniquifier: 0xf77d8a3de122380b (took 9 ms) 06:53:44.559 [main] DEBUG io.netty.buffer.ByteBufUtil - -Dio.netty.allocator.type: unpooled 06:53:44.559 [main] DEBUG io.netty.buffer.ByteBufUtil - -Dio.netty.threadLocalDirectBufferSize: 65536 06:53:44.591 [nioEventLoopGroup-2-1] DEBUG io.netty.util.ResourceLeakDetector - -Dio.netty.leakDetectionLevel: simple 06:53:44.596 [nioEventLoopGroup-2-1] DEBUG io.netty.util.Recycler - -Dio.netty.recycler.maxCapacity.default: 262144 06:53:44.599 [nioEventLoopGroup-2-1] DEBUG i.f.codecs.FreeSwitchDecoder - read header line [Content-Type: auth/request] 06:53:44.601 [nioEventLoopGroup-2-1] DEBUG i.f.message.FreeSwitchMessage - adding header [CONTENT_TYPE] [auth/request] 06:53:44.601 [nioEventLoopGroup-2-1] DEBUG i.f.codecs.FreeSwitchDecoder - read header line [] 06:53:44.602 [nioEventLoopGroup-2-1] DEBUG io.netty.util.internal.Cleaner0 - java.nio.ByteBuffer.cleaner(): available 06:53:44.602 [nioEventLoopGroup-2-1] DEBUG i.n.channel.DefaultChannelPipeline - Discarded inbound message FreeSwitchMessage: contentType=[auth/request] headers=1, body=0 lines. that reached at the tail of the pipeline. Please check your pipeline configuration. 06:53:44.603 [nioEventLoopGroup-2-1] DEBUG i.f.outbound.OutboundHandler - Received message: [FreeSwitchMessage: contentType=[auth/request] headers=1, body=0 lines.] 06:53:44.607 [nioEventLoopGroup-2-1] DEBUG i.f.outbound.OutboundHandler - Auth requested, sending [auth *****] 06:53:44.683 [nioEventLoopGroup-2-1] DEBUG i.f.outbound.OutboundHandler - Command sent to freeSwitch [auth ClueCon] 06:53:44.683 [nioEventLoopGroup-2-1] DEBUG i.f.codecs.FreeSwitchEncoder - Encoded message sent [auth ClueCon ]的图像，如你所示：

img

使用CSS3的动画如下所示：

<body>
    <img id="img" src="http://www.honda-perf.net/images/thumbs/cat.jpg">
</body>

上面的代码适用于支持CSS 3的所有现代浏览器。动画代码的解释是：

在#img { -webkit-animation: horizontalflip 5s infinite; -moz-animation: horizontalflip 5s infinite; -o-animation: horizontalflip 5s infinite; /* Chrome, Safari, Opera */ animation: horizontalflip 5s infinite; } @-webkit-keyframes horizontalflip { 0% { transform: scale(1,1); } 50% { transform: scale(-1,1); } 100%{ transform: scale(1,1); } } @-moz-keyframes horizontalflip { 0% { transform: scale(1,1); } 50% { transform: scale(-1,1); } 100%{ transform: scale(1,1); } } @-o-keyframes horizontalflip { 0% { transform: scale(1,1); } 50% { transform: scale(-1,1); } 100%{ transform: scale(1,1); } } @keyframes horizontalflip { 0% { transform: scale(1,1); } 50% { transform: scale(-1,1); } 100%{ transform: scale(1,1); } }元素上运行动画，我将其命名为#img。完整的动画需要5秒钟才能完成，它将无限运行。如果5秒看起来太多，您可以将时间值更改为您认为合适的值。
下一段代码（包含horizontalflip）描述动画会发生什么。每2.5秒（在点1定义的50％的时间），图像水平镜像。动画本身非常简单，但您必须单独执行每个供应商前缀。

工作JS小提琴：https://jsfiddle.net/vuc4pxsk/1/

我希望我能正确理解你的要求。

有关CSS 3动画的更多信息，请参阅： https://css-tricks.com/almanac/properties/a/animation/

翻转图像，然后在html

1 个答案: