有人可以帮助我使用Web应用程序来模拟图像传输吗?

Question

我正在尝试通过显示从原始设备中消失的图像并在目标设备上出现延迟后来模拟图像传输。该应用程序用于设计手势的实验

我已经完成了以下内容，显示了图像在悬停时如何显示和消失

    #pic3 {
    max-width: 800px;
    max-height: 500px;
    width:500px; height:800px;
    position:absolute;
    }
    #pic3 {
    max-width: 800px;
    max-height: 500px;
    width:500px; height:800px;
    position:absolute;
    }
    #pic4 {
    width:500px; height:800px;
    position:absolute;
    max-width:800px;
    max-height: 500px;
    opacity:0;
    -webkit-transition: opacity 1s;
    }
    #pic3:hover ~ #pic4, #pic4:hover {
    opacity:1;
    }

 <div class="maps1">
    <img id="pic3" src="http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg" />
    <img id="pic4" src="http://www.garageservicesruislip.co.uk/communities/5/004/008/507/645/images/4586026183.jpg />
</div>

Answer 1

你在最后一个img的html中有一个拼写错误（缺失"）

顺便说一句，我会尝试使用jQuery来解决它

Answer 2

如果您尝试在一台设备（即台式计算机）上制作动画，请在另一台设备上触发动画（即智能手机），您将需要一些在两者之间进行通信的方式。需要某种会话 ID 或其他标记来促进两个单独的浏览器之间的通信，这两个浏览器访问每个浏览器都分别加载和呈现的网页上的内容。

您将能够通过多种方式实现这种功能，但我建议使用 node.js 在 websocket 上阅读。

如果您只是想在一个屏幕上模拟它（阅读：一个浏览器，一个会话），那么您最好做一些@jbutler483描述的事情。

Answer 3

一个简单的关键帧解决方案：

.device {
  position: absolute;
  height: 200px;
  width: 150px;
  background: gray;
  border: 10px solid black;
  border-radius: 5px;
  top: 0;
  left: 400px
}
.device:first-child {
  right: auto;
  left: 0;
}
img {
  height: 100px;
  width: 100px;
  z-index: 8;
  position: absolute;
  top: 20px;
  left: 30px;
  -webkit-animation: animated 5s infinite;
  animation: animated 5s infinite;
  -webkit-animation-direction: linear;
  /* Chrome, Safari, Opera */
  animation-direction: linear;
}
@-webkit-keyframes animated {
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    left: 30px;
  }
  60% {
    opacity: 0;
    left: 430px;
  }
  90% {
    left: 430px;
    opacity: 1;
  }
  100% {
    left: 430px;
    opacity: 1;
  }
}
@keyframes animated {
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    left: 30px;
  }
  60% {
    opacity: 0;
    left: 430px;
  }
  90% {
    left: 430px;
    opacity: 1;
  }
  100% {
    left: 430px;
    opacity: 1;
  }
}

<div class="device"></div>
<img src="http://placekitten.com/g/300/300" />
<div class="device"></div>

---

我的方法

你可以为此使用关键帧，并使用一点魔术来创建漂亮的效果。在这里，我使用旋转、不透明度和移动来生成从一台设备到另一台设备的这种"运动"。

.start,
.end {
  position: absolute;
  height: 250px;
  background: gray;
  border: 10px solid black;
  border-radius: 5px;
  width: 100px;
  top: 0;
  left: 0;
}
.end {
  left: auto;
  right: 0;
}
.imgMove {
  background: url(http://placekitten.com/g/300/300);
  background-size: 100% 100%;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 8;
  -webkit-animation: myfirst 3s infinite;
  animation: myfirst 3s infinite;
}
#two {
  background: url(http://placekitten.com/g/200/300);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.4s;
}
#three {
  background: url(http://placekitten.com/g/300/200);
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.6s;
}
@-webkit-keyframes myfirst {
  0% {
    top: 100px;
    height: 50px;
    width: 50px;
    opacity: 0;
  }
  50% {
    top: 10px;
    height: 200px;
    width: 200px;
    left: calc(50% - 100px);
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    top: 100px;
    height: 50px;
    width: 50px;
    left: 90%;
    -webkit-transform: rotate(720deg);
    opacity: 0;
  }
}
@keyframes myfirst {
  0% {
    top: 100px;
    height: 50px;
    width: 50px;
    opacity: 0;
  }
  50% {
    top: 10px;
    height: 200px;
    width: 200px;
    left: calc(50% - 100px);
    transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    top: 100px;
    height: 50px;
    width: 50px;
    left: 90%;
    transform: rotate(720deg);
    opacity: 0;
  }
}

<div class="wrap">
  <div class="imgMove" id="one"></div>
  <div class="imgMove" id="two"></div>
  <div class="imgMove" id="three"></div>
  <div class="start">START</div>
  <div class="end">END</div>
</div>