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

Question

I am trying to simulate a transfer of images by showing an image disappearing from the originating device and after a delay appearing on the target device. The application is for an experiment to design gestures

I have done the following that shows how an image appears and disappears when hovered upon

  #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

you have a typo in your html in the last img (missing ")

btw. i would try to solve it using jQuery

Answer 2

A simple Keyframe solution:

 .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> 

---

My Approach

You could use Keyframes for this, and use a little magic to create a nice effect. Here I've used rotation, opacity, and movement to generate this 'movement' from one device to another.

 .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> 

Answer 3

If you are trying to make an animation on one device - ie a desktop computer - trigger an animation on another device - ie a smartphone - you're going to need some means of communicating between the two. There will need to be some kind of session ID or other marker to facilitate communication between two separate browsers accessing content on a webpage each of them has loaded and rendered separately.

You'll be able to achieve this kind of functionality in a number of ways, but I suggest reading up on websockets using node.js .

If you're simply trying to mock it up on one screen (read: one browser, one session) then you're best off doing something like what @jbutler483 describes.