Home > Developer > Web Develop
Video Effects and JS videos are achieved through html + js image swiping
A player is required to play a video on a webpage, but the video playing effect can also be achieved through image swiping.
The Z-index attribute is used in JS to record the address of the blog that explains the Z-index attribute:
Http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html
Method 1:
JS Code
<Script type = "text/javascript">
Var imageNr = 0;
Var finished = new Array ();
Function createImageLayer (){
Var img = new Image ();
Img. style. position = "absolute ";
Img. style. zIndex = 0;
Img. onload = imageOnload;
Img. width = 480;
Img. height = 320;
Img. src = "/? Action = snapshot & n = "+ (++ imageNr );
Var webcam = document. getElementById ("webcam ");
Webcam. insertBefore (img, webcam. firstChild );
}
Function imageOnload (){
This. style. zIndex = imageNr;
While (1 <finished. length ){
Var del = finished. shift ();
Del. parentNode. removeChild (del );
}
Finished. push (this );
CreateImageLayer ();
}
</Script>
Html body
// Call the createImageLayer () function after the webpage is loaded.
<Body onload = "createImageLayer ();">
<Div id = "webcam" style = "width: 480px; height: 320px;"> </div>
The general principle of method 1 is that the Web Front-end gets an image from the service, and the server sends the image to the Web Front-end.
Send an image and obtain and display the image in a loop. Currently, most stray devices support this method.
Method 2:
Html body
Method 2: javascript is not required. Simply use html to load an image on the server. Although the method is simple, most
The browser does not support Firefox. Currently, only Firefox supports Firefox.
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
