¿Cómo controla js la animación css3?
Cómo usar js para activar la animación css3. Debes escribir el estilo de animación de antemano usando CSS3. Coloque el mouse en la parte frontal y agregue una clase para que cuando se haga clic con el mouse, haya una animación CSS3. Cuando el mouse se vaya, elimine el estilo y la animación finalizará.
En el código html, cuando el mouse se mueve sobre el botón, el borde del botón parpadea; cuando el mouse sale del botón, el botón vuelve a la normalidad. ¿Alguien puede darme alguna orientación?
Método 1css
.btn:hover{
/*Llamar animación css3 o gif parpadeante*/
}
Método 2js
$().hover(function(){
//Evento de entrada del mouse
},function(){
//Evento de mouse fuera
})
¿Cómo desaparece la animación del código CSS después de ejecutarse?
Después de ejecutar la animación del código CSS, agregue animación-fill-mode:forwards directamente para que la animación CSS permanezca en el último fotograma después de la ejecución.
¿Cuáles son los complementos de grid de Javascript que hacen un uso potente de las aplicaciones JS?
Clase de herramienta
Biblioteca de herramientas para una manipulación conveniente de objetos, matrices, etc.
underscore.js
lo-dash y guión bajo .js La API es básicamente la misma.
Su ventaja sobre el guión bajo es que es muy eficiente; se puede crear a medida
Sugar agrega algunos métodos de herramientas a los objetos nativos
functional.js proporciona algo de soporte para Curry
Watch.js monitorea cambios en objetos o propiedades
Programación funcional de bacon.js, genial
streamjs usa flujos para realizar operaciones en serie en matrices y objetos
p>Control de procesos asincrónicos
Producido por eventproxy Pu Ling
Detalles de Arbiter.js
Publicar y suscribirse
qEstilo de promesa
Async.js
mock
Mock.js genera datos aleatorios y solicitudes simuladas de Ajax
solicitudes jquery-mockjaxmockajax
Tiempo biblioteca
momento
datejs
Detección de navegador
Bowser detecta navegadores y versiones específicas
ua-parser- js detecta navegadores y versiones, sistemas operativos, tipos de dispositivos, etc. específicos.
Depuración
console-polyfill puede utilizar de forma segura métodos de consola como console.log()
log hace que la salida del registro de la consola tenga un estilo
Konsole.js genera información de registro detallada en un elemento de la página
operación uri.jsuri
Biblioteca de herramientas para agregar, eliminar y modificar cookies
Detalles de la biblioteca de enrutamiento frontal de Director
BigDecimal.js mejora la precisión de las operaciones digitales
JSDoc se basa en el archivo javascript comenta información y genera documentación API detallada
Encapsulación de eventos de teclado de teclas de acceso rápido
Biblioteca MD5 que utiliza MD5 para cifrar archivos
Clase de mejora del navegador
Una biblioteca que hace que algunos navegadores antiguos sean impresionantes
Selectivizr le da a IE6-8 algunos selectores CSS3
ieBetter hace que IE6-8 tenga características avanzadas de navegador
ExplorerCanvas permite que los navegadores basados en IE8 admitan lienzo
CSS3Pie permite que IE6-9 admita bordes radiosos, sombras de cuadros y gradientes lineales. Puede utilizar archivos .htc (tenga en cuenta Minetype) o archivos .js. Cuando se usa Pie.js, cuando el elemento box-radious tiene un color de fondo, el color de fondo no se muestra. . .
formFive permite que los navegadores antiguos admitan algunas funciones de los formularios HTML5, como marcador de posición y enfoque automático
/anselmh/object-fit permite que los navegadores admitan la regla CSS de ajuste de objetos
HTML5CrossBrowserPolyfills un montón de Polyfills
La flexibilidad permite que el antiguo IE también admita Flexbox
Mejora del selector
Lining.js permite a los navegadores implementar similares:: El efecto de nth-line(),::nth-last-line()
Sin categoría
prefixfree lo usa al escribir CSS, no es necesario agregar un prefijo al navegador.
Clase de formulario
jquery-file-upload detalles del componente de carga del archivo
zControl de vista de árbol de archivos
Dispositivo de edición de árbol.
La visualización se siente como un mapa mental
Procesamiento de archivos por parte de FileAPI en el cuadro de selección de archivos
Validación de formulario
.Validar detalles
jQuery -Validation-Engine
Embellecimiento de elementos de formulario
uniform proporciona embellecimiento de cuadros desplegables, cuadros individuales, casillas de verificación, botones y otros elementos de formulario
select2 cuadro desplegable de selección múltiple
La selectividad es similar a unfilom
cuadro desplegable DropKick, selección única y múltiple. La apariencia es mejor que la uniforme
componente de cambio de estilo switcheryios7
nouislider usa barras de desplazamiento para configurar/controlar (volumen, etc.)
range.css embellece el apariencia de los elementos de entrada
Clase de imagen
holderjs genera imágenes de marcador de posición
lazyload
Después de cargar todas las imágenes seleccionadas por imagesLoaded, el se ejecuta la devolución de llamada
CSSgram usa el filtro CSS3 para implementar la biblioteca de filtros de Instagram
Clase de iconos
Resumen de IconFont
Iconos SVG
svgicons
icónico
HYBICON con efectos interactivos. Por ejemplo, cuando pasa el cursor y hace clic en
icono de entidad de carácter HTML
/
icono de transformaicons, habrá algunos efectos de transformación. Por ejemplo, el signo más se convierte en una cruz
css3patternscss3 crea texturas enlosables. La compatibilidad del navegador no es buena.
Examinar imágenes
aparece fancybox para ver imágenes, videos, etc. demostración
yoxview aparece para ver imágenes y el tamaño de la imagen se escala de forma muy natural
Picture Wall
wookmark
UI Framework
WeUI está diseñado por el equipo de diseño oficial de WeChat para el desarrollo web de WeChat.
Framework7
Clase de componente UI
Arrastrar
dragula admite arrastrar, soltar y ordenar. Se siente más liviano y fácil de usar que jqueryUI
Versión angular oficial de angular-draguladragular
Visualización de datos (gráfico)
Echarts producidos por Baidu
p>highcharts es poderoso. Hay una tarifa.
Plottable.JS es una biblioteca de gráficos basada en D3
La documentación de flot no es sólida
La demostración del documento chino de chartJ es muy hermosa y clara. Relativamente ligero.
ichartJs Lo hizo un chico de China y se siente bastante bien.
Componente selector de hora
foundation-datepicker
DatePicker es un detalle simple del calendario
fullcalendar admite una forma gratuita de cambiar la fecha Lista de tareas Hora del evento
Me gusta la apariencia de SimpleEventsCalendar. Cuesta 5$
jQueryuidatepicker es clásico, no muy bonito
pickadate es ligero, compatible con dispositivos móviles y bonito. Pero parece que solo se puede mostrar en la capa emergente y no hay una visualización desplegable.
zebra-datepicker es muy configurable. Pero parece que sólo puede aparecer en la esquina superior derecha. . .
estilo bootstrap-datepickerbootstrap.
dateRangePicker selecciona un período de tiempo. estilo de arranque.
Este componente se basa en TwitterBootstrap, Moment.js y jQuery.
Barra de desplazamiento personalizada
barra de desplazamiento ligera perfectscrollbar. La apariencia es la misma que la barra de desplazamiento de Chrome en Mac.
iscroll funciona bien en dispositivos móviles
Efecto de carga
CSSSpinnersCSS
Loaders.cssCSS
p>Tabla componente
jsGridDataGrid. Detalles
backgrid se basa en DataGrid de Backbone.js
excellentexport genera Excel a partir del contenido de la tabla. Compatible con Firefox, Chrome, IE6+
Se puede interactuar con tablas de datos (clasificando contenido, eliminando, etc.)
handsontable genera datos con apariencia de Excel
Hojas de cálculo J Biblioteca de componentes de datos de tabla
Seleccionar color
Espectro
Compartir en SNS
JiaEsto genera un código para compartir.
Editor
editor de código ace, se puede utilizar para demostraciones de demostración
ckeditor
ueditor creado por Baidu
tinymce edita contenido HTML en tiempo real
summernote es bueno para dispositivos móviles
Componente de notificación
notie.js
Reproductor HTML5
jwplayer es utilizado por una gran cantidad de sitios web
html5media es un h5player simple y liviano
jplayer tiene funciones potentes y se puede personalizar
Muestra
Impress.js varias rotaciones y experiencias únicas
fullPage se muestra en pantalla completa. Utilice la rueda de desplazamiento para pasar las páginas en detalle
zepto.fullpage se centra en fullPage.js en el lado móvil, confiando en Zepto
pagePiling es similar a fullPage
turn.js para hacer un libro Libro, con un hermoso efecto de cambio de página
Presentación de diapositivas
slidesjs es muy fácil de usar, pero el CSS para la navegación de la presentación de diapositivas debe escribirse por mí mismo, jaja, detalles
iSlider es un componente deslizante de JavaScript para plataforma móvil sin dependencias de complementos. Detalles
La presentación de diapositivas en pantalla completa de bgstretcher cambiará a medida que cambie el tamaño de la página.
Swiper es un complemento deslizante táctil móvil potente, gratuito y de código abierto. El sitio web chino de Swiper
coin-slider es compatible con IE6. Bastante bien~. Sin embargo, el método de cambio es bloque por bloque. El método de conmutación no se puede configurar. . .
wowslider tiene varios efectos interesantes al cambiar de diapositiva. PEAJE.
La presentación de diapositivas normal de Cycle2 no admite el desplazamiento vertical. . .
jcarousel es una presentación de diapositivas normal, no compatible con IE6
reveal3d scrolling. Es bastante bueno para crear ppts
nodePPT está hecho por chinos y es bastante bueno para crear ppts. En algunos aspectos es mejor que revelar. Pero hay algunos problemas con el html exportado generado
Al cambiar roundabout3d, puedes ver el lado de la imagen en la parte posterior
Cuadro emergente
Magnific-Popup es compatible con PC y dispositivos móviles. No está mal, hay capas de más de 5k estrellas desarrolladas por chinos, compatibles con ie6+. No me gusta como se llama.
Efectos de animación
mixitup utiliza hermosos efectos de animación para completar la clasificación y el filtrado.
Efecto de marquesina jQuery.Marquee
Efecto de giro rápido de tarjeta
El efecto de giro de tarjeta 2 es compatible. La escritura es relativamente simple: 1. Solo admite voltear en la dirección x 2. Todos los nombres de las clases están especificados 3. Solo se puede llamar una vez. Necesita ser reescrito. Mira mi versión mejorada aquí
TheaterJS simula una conversación entre dos personas en la pantalla
El color del texto de medianoche.js cambia con el fondo, _explodes
color: complemento de animación de degradado de color para animaciónjquery. La animación jquery no admite cambios en los valores de color. La biblioteca proporciona este apoyo.
transit realiza transformación CSS en elementos
tagcanvasEfecto de nube de etiquetas 3D en detalle
animación de cambio de imagen con icono
Snap.js izquierda/derecha El efecto de apariencia de la navegación lateral
Animación CSSshake jitter
Algunos efectos interesantes después de hacer clic con ClickSpark.js
Complemento de diferencia visual
scrollorama es relativamente simple
superscrollorama puede crear más efectos, pero requiere una biblioteca Tween de terceros, que es más complicada de usar.
scrolldeck
flash
swfobj puede detectar automáticamente la compatibilidad del complemento Flash con varios navegadores convencionales en PC y máquinas Mac. Hace que la inserción de recursos multimedia Flash sea lo más sencilla y segura posible. Y es muy coherente con los principios de optimización de motores de búsqueda. Además, puede evitar que aparezcan etiquetas no estándar, como object e embed, en su HTML y XHTML, cumpliendo así con más estándares. Detalles
Lotería
wEfecto de raspado de tarjeta rasca y gana de ScratchPad
Complemento de rotación jqueryrotate. Se puede utilizar para crear efectos de lotería de carrusel
Categoría de mejora de la experiencia del usuario
Intro.js es muy bueno para introducir funciones de sitios web. También se puede utilizar como guía para principiantes.
blockUILComponente de soporte.
Información de solicitud de sugerencia simple. Hecho con css. Compatibilidad IE9+.
Cuando el texto puntodotdot se desborda, agrega puntos suspensivos al final del texto
jQuery-menu-aim cambia el menú secundario tan rápido como la página de inicio de Amazon
Función de lupa AnythingZoomer
Embellecer/resaltar código de sintaxis
google-code-prettify
DlHighlight solo admite resaltado de sintaxis JavaScript, CSS, XML y HTML p>
Aleatorice colores cómodos según sea necesario
Instrucciones inteligentes de entrada impresionantes y indicaciones de autocompletar
indicaciones proTip. Se siente mejor que el consejo de Bootstrap
Biblioteca de gestos Hammerjs. Encapsula deslizar, tocar, pellizcar, desplazarse y otros gestos
Animación
La velocidad mejora el rendimiento de la animación Jquery. y nuevas funciones como animación en color.
SVG
Snap.svg es una biblioteca JS para operar SVG. Conocido como el jQuery de SVG. demo
walkway dibuja gradualmente la ruta SVG de forma animada.
Prueba
Mocha
Chai
Debería
Snoion
DeviceMock.jsmock equipo.
Otras categorías
Se detalla la solución de ZeroClipboard para copiar contenido al portapapeles y ser compatible con los navegadores convencionales
Convertir html2canvashtml en lienzo, que se puede utilizar para tomar capturas de pantalla . Detalles
Marco de correo electrónico HTML responsivo de Ink
Prueba de rendimiento
Capture y analice contenido RSS (no puede cruzar dominios, por lo que se requiere un proxy en segundo plano, por lo tanto). llamado análisis de Rss en realidad analiza xml)
jFeed
jRss es una versión simple de jFeed
scriptcam interactúa con la cámara
cylon. js robot framework, admite 35 plataformas
Marco de mampostería en cascada
devices.css Apariencia de los bordes de los dispositivos móviles. Es genial para crear prototipos.
Clases relacionadas con Bootstrap
Bootbox.js encapsula el cuadro emergente de bootstrap
Aspecto gratuito
AdminLTE
Repositorio de JSPlugins
Sitio web de complementos jQuery de alta calidad jQueryCards
jster
nodemodules
npmrankSortnpmpackagesbypagerank
YOUMIGHTNOTNEEDJQUERYPLUGINS no depende del complemento js de jQuery.
awesome-nodejs
Bibliotecas Library.io en varios idiomas
Un framework basado en Avalon creado por OniUI Qunar.com
Comúnmente frameworks móviles usados
zepto.js
La sintaxis es casi la misma que la de jquery. Si conoces jquery, básicamente conocerás zepto~
La última versión. se ha actualizado a 1.16
p>iscroll.js
Resuelva los problemas causados por la página que no admite el desplazamiento elástico y se corrigió ~
Lograr actualización desplegable , pantalla deslizante, zoom y otras funciones~
La última versión ha sido actualizada a 5.0
underscore.js
El autor no lo ha usado, pero yo Escuché que es fácil de usar y lo recomiendo a todos ~
La biblioteca proporciona un conjunto de funciones de programación funcionales útiles, pero no amplía ningún objeto integrado de JavaScript.
La última versión se ha actualizado a 1.8.2
Marco de pantalla deslizante
Adecuado para el efecto de deslizar la pantalla hacia arriba y hacia abajo, hacia la izquierda y hacia la derecha, etc.
slip.js
iSlider.js
fullpage.js
swiper.js
flex diseño
El diseño flexible se puede utilizar actualmente en dispositivos móviles. No todas las sintaxis son totalmente compatibles, pero el efecto es bueno~
.