1. Presentación del formulario
2. Flash
3. HTML5
El formulario envía una página de actualización, es difícil cargar asíncrono; Basado en HTML5 parece estar cobrado, puede ir al sitio web oficial para ver;
Efecto Figura 1:
Efecto Figura 2:
Debido a que la carga local es demasiado rápida, grabé un GIF de 80 m, y finalmente puedo ver los detalles de la carga.
Porque el código es más:
Este habla principalmente de HTML y CSS:
Código HTML:
<! css type = text/css rel = stylesheet/> </head> <body> <div id = uploadbox> <ul> <li> <img src = images/pic1.jpg/> <span class = progress> </span > <span class = porcentaje> </span> </li> <li> <img src = images/pic2.jpg/> <span class = progress> </span> <span class = porcentaje> 12%</span > </li> <li class = ded> <img src = images/pic2.jpg/> <span class = progress> </span> <span class = porcentaje> </span> </li> <div class = Clearfix> </div> </ul> </div> </body> </html>
Todavía muy simple:
A. Un Div#Subloadbox, UL Li representa cada unidad de imagen de carga
B. Imagen de Li img
C. li Span. El progreso se usa para mostrar el progreso.
D. Li Span. Se utiliza el porcentaje para mostrar números del 1%al 100%en el centro de la imagen.
CSS:
Body {Background: #eee;} #UPLOADBOX {ancho: 622px; ; Absoluto a la izquierda: 50%; ; Border -Radius: 34.5px; : -1000em;} #UPLOAdBox Li .Progress {Position: Absolute;Todos son simples, básicamente el uso simple del posicionamiento ~ Todos pueden verlo ~
Mapa del último efecto:
Lo anterior es todo el contenido de este artículo.